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

伙计们，我有麻烦了。我制作了一个歌曲表，然后将它们插入本地存储，现在我想搜索本地存储中的项目，看看本地存储（表中）中是否存在专辑名称，我编写了这个.js代码，当我尝试搜索本地存储中的项目（数组中的对象）时，例如，我尝试搜索california，它会打印“否”但在本地存储中有一个名为california的，但当我搜索chuck时，它会打印“是”，如果我再添加一个，它也会这样做，它只会打印这个数组中的最后一项，为什么会发生这种情况。提前谢谢

让ls=[{
名称：“加利福尼亚”，
艺术家：“眨眼182”，
年份：2016年，
总数：28
},
{
姓名：“查克”，
艺术家：“sum41”，
年份：2004年，
总数：13
}
];
setItem（“songs”，JSON.stringify（ls））；
document.getElementById（“btn”）.addEventListener（“单击”，搜索）；
功能搜索（e）{
parse（localStorage.getItem（“歌曲”）；
让inputVal=document.getElementById（“输入”）.value；
让outputVal=document.getElementById（“输出”）；
for（设i=0；i

正文{
背景色：石灰；
线高：1.5；
字体大小：15px；
保证金：自动；
宽度：80%；
}
桌子
th，
运输署{
边框：2件纯黑；
填充：20px；
}
div{
利润率：50像素；
}

相册名称
艺术家
年
努莫夫轨道
加利福尼亚
眨眼182
2016
28
扔出
总数41
2004
13
搜索LS

搜寻

问题在于您正在将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";
    }
  } 

for（设i=0；i

现在您应该能够看到列表值的

YESNO

函数搜索（e）{
parse（localStorage.getItem（“歌曲”）；
让inputVal=document.getElementById（“输入”）.value；
让outputVal=document.getElementById（“输出”）；
var resultExists=false；
var resultCount=0；
for（设i=0；i}

我会尝试以下方法：

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

函数搜索（e）{
让songs=JSON.parse（localStorage.getItem（“songs”）；
让inputVal=document.getElementById（“输入”）.value；
让outputVal=document.getElementById（“输出”）；
outputVal.innerHTML=dataContainsField（ls，inputVal）？“是”：“否”；
e、 预防默认值（）；
}
函数dataContainsField（数据，字段）{
for（设i=0；i

---

将用于检查数据集中是否存在数据的逻辑放入函数中，可以更轻松地编码该逻辑并将其与搜索函数解耦。

它将打印所有项目，但每次都会覆盖innerHTML值，而不是添加到其中，请参见下面的编辑

让ls=[{
名称：“加利福尼亚”，
艺术家：“眨眼182”，
年份：2016年，
总数：28
},
{
姓名：“查克”，
艺术家：“sum41”，
年份：2004年，
总数：13
}
];
//setItem（“songs”，JSON.stringify（ls））；
document.getElementById（“btn”）.addEventListener（“单击”，搜索）；
功能搜索（e）{
//parse（localStorage.getItem（“歌曲”）；
让inputVal=document.getElementById（“输入”）.value；
让outputVal=document.getElementById（“输出”）；
/*注意使用+=代替=*/
for（设i=0；i

正文{
背景色：石灰；
线高：1.5；
字体大小：15px；
保证金：自动；
宽度：80%；
}
桌子
th，
运输署{
边框：2件纯黑；
填充：20px；
}
div{
利润率：50像素；
}

相册名称
艺术家
年
努莫夫轨道
加利福尼亚
眨眼182
2016
28
扔出
总数41
2004
13
搜索LS

搜寻

当您使用

进行

循环时，这就是为什么每次它都用最后一个值覆盖您的值。你可以用这个试试。另外，您的

search（e）

函数中的localStorage数据解析也存在一些问题，在执行任何查找/搜索操作之前，您没有将其存储到

ls

变量中

参见工作演示

---

问题是您正在用“否”覆盖“是”。您应该将默认值设置为false，并在找到或删除else条件后将其设置为true

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

函数搜索（e）{
parse（localStorage.getItem（“歌曲”）；
让inputVal=document.getElementById（“输入”）.value；
让outputVal=document.getElementById（“输出”）；
设bFound=false；
让我=
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();
}