для цикличной печати только последний элемент в массиве объектов - PullRequest
Новая
       0

для цикличной печати только последний элемент в массиве объектов

0 голосов
/ 08 мая 2018

Ребята, у меня тут проблемы. Я составил таблицу песен, затем вставил их в локальное хранилище, и теперь я хочу искать элементы в локальном хранилище, чтобы увидеть, существует ли название альбома в локальном хранилище (в таблице) или нет, я сделал это. JS-код и когда я пытаюсь найти элементы в локальном хранилище (объекты в массиве), например, я пытаюсь найти Калифорнию, и он печатает «НЕТ», но есть в локальном хранилище под названием Калифорния, но когда я ищу Чак, он печатает «ДА», и если я добавлю еще один, он будет делать то же самое, он напечатает только последний элемент в этом массиве, почему это происходит. Заранее спасибо. 

let ls = [{
    name: "california",
    artist: "blink182",
    year: 2016,
    num: 28
  },
  {
    name: "chuck",
    artist: "sum41",
    year: 2004,
    num: 13
  }
];

localStorage.setItem("songs", JSON.stringify(ls));

document.getElementById("btn").addEventListener("click", search);

function search(e) {
  JSON.parse(localStorage.getItem("songs"));
  let inputVal = document.getElementById("input").value;
  let outputVal = document.getElementById("output");



  for (let i = 0; i < ls.length; i++) {
    if (inputVal === ls[i].name) {
      outputVal.innerHTML = "YES";
    } else {
      outputVal.innerHTML = "NO";
    }
  }

  e.preventDefault();
}
body {
  background-color: lime;
  line-height: 1.5;
  font-size: 15px;
  margin: auto;
  width: 80%;
}

table,
th,
td {
  border: 2px solid black;
  padding: 20px;
}

div {
  margin: 50px;
}
<table>
  <tr>
    <th>Name of album</th>
    <th>Artist</th>
    <th>Year</th>
    <th>numOfTracks</th>
  </tr>

  <tr>
    <td>California</td>
    <td>Blink 182</td>
    <td>2016</td>
    <td>28</td>
  </tr>

  <tr>
    <td>Chuck</td>
    <td>Sum 41</td>
    <td>2004</td>
    <td>13</td>
  </tr>
</table>

<form id="myForm">
  <p>Search LS</p>
  <input type="text" id="input">
  <button type="submit" id="btn">Search</button>
</form>

<div id="output"></div>

Ответы [ 6 ]

0 голосов
/ 08 мая 2018

Проблема в том, что вы переопределяете да с нет. Вам следует установить значение по умолчанию в false и сделать его истинным, как только найдено, или удалить условие else. 

function search(e) {
  JSON.parse(localStorage.getItem("songs"));
  let inputVal = document.getElementById("input").value;
  let outputVal = document.getElementById("output");
  let bFound = false;
  for (let i = 0; i < ls.length; i++) {
    if(inputVal === ls[i].name) {
      bFound = true;
      break;
    }
  }
  outputVal.innerHTML = bFound ? "YES" : "No";
  e.preventDefault();
}
0 голосов
/ 08 мая 2018

Поскольку вы используете цикл for, поэтому каждый раз, когда он просто перезаписывает , вы присваиваете последнее значение. Вы можете попробовать это с помощью Array.prototype.find () . Также у вас есть некоторые проблемы с анализом данных localStorage внутри вашей функции search(e), здесь вы не сохраняете их в переменной ls перед выполнением любой операции поиска / поиска

См. Рабочую демонстрацию https://jsfiddle.net/ttr80ona/

let ls = [{name: "california",artist: "blink182",year: 2016,num: 28},{name: "chuck",artist: "sum41",year: 2004,num: 13}];

localStorage.setItem("songs", JSON.stringify(ls));

document.getElementById("btn").addEventListener("click", search);

function search(e) {
  let ls = JSON.parse(localStorage.getItem("songs")); //I've modified here
  let inputVal = document.getElementById("input").value;
  let outputVal = document.getElementById("output");

  var status = ls.find(elm => elm.name === inputVal);
  if (status)
    outputVal.innerHTML = "YES";
  else
    outputVal.innerHTML = "NO";

  e.preventDefault();
}
0 голосов
/ 08 мая 2018

Он печатает все элементы, но вы перезаписываете значение innerHTML каждый раз вместо добавления к нему, см. Редактирование ниже. 

let ls = [{
        name: "california",
        artist: "blink182",
        year: 2016,
        num: 28
      },
      {
        name: "chuck",
        artist: "sum41",
        year: 2004,
        num: 13
      }
    ];

    // localStorage.setItem("songs", JSON.stringify(ls));

    document.getElementById("btn").addEventListener("click", search);

    function search(e) {
      // JSON.parse(localStorage.getItem("songs"));
      let inputVal = document.getElementById("input").value;
      let outputVal = document.getElementById("output");
      /* note the use of += instead of = */
      for (let i = 0; i < ls.length; i++) {
        if (inputVal === ls[i].name) {
          outputVal.innerHTML += "YES";
        } else {
          outputVal.innerHTML += "NO";
        }
      }

      e.preventDefault();
    }
body {
      background-color: lime;
      line-height: 1.5;
      font-size: 15px;
      margin: auto;
      width: 80%;
    }

    table,
    th,
    td {
      border: 2px solid black;
      padding: 20px;
    }

    div {
      margin: 50px;
    }
<table>
      <tr>
        <th>Name of album</th>
        <th>Artist</th>
        <th>Year</th>
        <th>numOfTracks</th>
      </tr>

      <tr>
        <td>California</td>
        <td>Blink 182</td>
        <td>2016</td>
        <td>28</td>
      </tr>

      <tr>
        <td>Chuck</td>
        <td>Sum 41</td>
        <td>2004</td>
        <td>13</td>
      </tr>
    </table>

    <form id="myForm">
      <p>Search LS</p>
      <input type="text" id="input">
      <button type="submit" id="btn">Search</button>
    </form>

    <div id="output"></div>
0 голосов
/ 08 мая 2018

Я бы попробовал что-то вроде этого: 

function search(e) {
  let songs = JSON.parse(localStorage.getItem("songs"));
  let inputVal = document.getElementById("input").value;
  let outputVal = document.getElementById("output");

  outputVal.innerHTML = dataContainsField(ls, inputVal) ? "YES" : "NO";

  e.preventDefault();
}

function dataContainsField(data, field) {
  for (let i = 0; i < data.length; i++) {
    if (field === data[i].name) return true;
  }

  return false;
}

Помещение логики для проверки наличия данных в вашем наборе данных в функцию облегчает кодирование и отделение этой логики от функции поиска.

0 голосов
/ 08 мая 2018 

function search(e) {
  JSON.parse(localStorage.getItem("songs"));
  let inputVal = document.getElementById("input").value;
  let outputVal = document.getElementById("output");

  var resultExists = false;
  var resultCount  = 0;

  for (let i = 0; i < ls.length; i++) {
    if (inputVal === ls[i].name) {
      // Case 2
      resultExists = true;
      resultCount++;
      
      // Updated your case
      // outputVal.innerHTML = "YES";
      // break;
      
    } 
    //else {
    //  outputVal.innerHTML = "NO";
    //}
  }
  
  // Case 2
  if(resultExists){
    outputVal.innerHTML = "YES";
    // Do anithing with resultCount if you need
  }else{
    outputVal.innerHTML = "NO";
  }

  e.preventDefault();
}
0 голосов
/ 08 мая 2018

Проблема в том, что вы устанавливаете HTML для div на YES / NO. Который переопределяется в следующей итерации, поэтому вы чувствуете, что он печатает последний элемент в списке. Вместо этого вам нужно добавить к тому, что уже есть 

  for (let i = 0; i < ls.length; i++) {
    if (inputVal === ls[i].name) {
      outputVal.innerHTML = outputVal.innerHTML + " YES" ;
    } else {
      outputVal.innerHTML = outputVal.innerHTML + " NO";
    }
  }

Теперь вы должны увидеть YESNO для значений списка

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...