Question

伙计们，我在这里遇到了麻烦。我制作了一个歌曲表，然后我将它们插入本地存储中，现在我想搜索本地存储中的项目以查看相册的名称是否存在于本地存储（在表中），我做了这个。 js代码，当我尝试搜索本地存储中的项目（数组中的对象）时，例如我尝试搜索加利福尼亚州并打印＆＃34; NO＆＃34;但是在本地存储中有一个名为california，但是当我搜索chuck时它打印＆＃34; YES＆＃34;，如果我再添加一个它会做同样的事情，它将只打印这个数组中的最后一个项目，为什么会发生这种情况。提前谢谢。

＆＃13;

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();
}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

问题是您将div的HTML设置为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列表值

Answer 2

const mongoose = require('mongoose)

Answer 3

我会尝试这样的事情：

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;
}

将逻辑检查数据集中是否存在数据到函数中可以更容易地编码并将该逻辑与搜索函数分离。

Answer 4

它正在打印所有项目，但您每次都要覆盖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>

Answer 5

当您使用for循环时，这就是为什么每次只有覆盖时，您会使用最后一个值。您可以使用Array.prototype.find()尝试这样做。你的search(e)函数中的 localStorage 数据解析也存在一些问题，在这里你没有在进行任何查找/搜索操作之前将它存储到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();
}

Answer 6

问题是你是否压倒是的。您应该将default设置为false，并在找到后将其设置为true或删除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();
}

for循环打印仅对象数组中的最后一项

6 个答案: