Question

我试图编写一个脚本来解析存储在服务器中的JSON文件，并将其键/值对返回到包含以冒号分隔格式的相关属性的列表项。我试图通过使用本机javascript命令来做到这一点。尽管文件已成功解析，并且您可以意识到通过调用带有引用数字的不同元素（例如myObject.pets[1].animal或myObject.pets.length），本应捕获所有项目的代码中的循环无法正常工作。

这是代码

<!DOCTYPE html>
<html>
<body>

<ul id="animals"></ul>

<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var myObject = JSON.parse(this.responseText);
    var finalString = "";
    for (i in myObject.pets.length) {
        var currentItem = "<li>" + myObject.pets[i].animal + ": " + myObject.pets[i].name + "</li>";
        var finalString = finalString.concat(currentItem);
    }
    document.getElementById("animals").innerHTML = finalString;
  }
};
xmlhttp.open("GET", "animals.json", true);
xmlhttp.send();
</script>

</body>
</html>

JSON文件

>animals.json
{
    "pets":[
        { "animal":"dog", "name":"Fido" },
        { "animal":"cat", "name":"Felix" },
        { "animal":"hamster", "name":"Lightning" }
    ]
}

和预期结果

<li>dog: Fido</li>
<li>cat: Felix</li>
<li>hamster: Lightning</li>

Answer 1

JavaScript的for ... in功能在对象的属性之间循环，它不会将变量增加到您期望的极限。要么用作

for (let i in myObject.pets)，它将为i对象中的每个键的值提供pets（数组中的索引用作对象中的键）。
或者因为这是一个标准数组，所以您可以用它做很多事情。您通常可以使用for (let i = 0; i < myObject.pets.length; i++)遍历它，但是根据您要尝试的操作，我建议使用reduce。

我提供了一个演示，该演示使用reduce来以现代JS方式获取finalString。但是，如果您想坚持使用当前函数，请确保在当前正在执行的循环中不要用finalString重新定义var finalString。我的演示未设置元素的innerHTML而是将其写入文档，但是您可以使用finalString做任何您想做的事情。

let apiResult = '{"pets":[{ "animal":"dog", "name":"Fido" }, { "animal":"cat", "name":"Felix" }, { "animal":"hamster", "name":"Lightning" } ] }';

let jsonResult = JSON.parse(apiResult);
    
let finalString = jsonResult.pets.reduce((total, current) => {
  return total.concat("<li>" + current.animal + ": " + current.name + "</li>");
}, "");

document.write(finalString);

Answer 2

我真的很喜欢@Matthew的回答。这是一个使用map而不是reduce的版本，它使代码更加冗长，但我认为这也更易于阅读。

const petsString = '{"pets": [{"animal": "dog", "name": "Fido"}, {"animal": "cat", "name": "Felix"}, {"animal": "hamster", "name": "Lightning"}]}'

const petsArray = JSON.parse(petsString).pets

const petsHtml = petsObject
  .map(pet => `<li>${pet.animal}: ${pet.name}</li>`)
  .join("")

document.write(petsHtml)

Answer 3

for (i in myObject.pets.length) {
        var currentItem = "<li>" + myObject.pets[i].animal + ": " + myObject.pets[i].name + "</li>";
        var finalString = finalString.concat(currentItem);
    }

“ myObject.pets.length”必须为“ myObject.pets”

将JSON服务器文件解析为HTML列表

3 个答案: