Question

这是我的JS（“数据”来自json调用）：

if (data.projectReports.length) {
  for (var i in data.projectReports){
    var report = data.projectReports[i];
    $('#reports').append(
        '<div class="report-description">' +
          '<h2>' + report.header + '</h2>' +
          '<p>' + report.text + '</p>' +
        '</div>' +
        '<ul class=\"report-moreinfo\">' +

          // I want to loop through "persons" here.

        '</ul>'
    );
  }
} else

. . .

这是我的JSON：

{
  "projectReports":[
    {
      "header":"Headline",
      "text":"Description of item",
      "estimate":10,
      "actual":7,
      "persons":{
        "Robert":5,
        "Erik":10,
        "Juan":3
      }
    }
  ]
}

我是JSON的新手，在寻找答案后，实际上找到了一些不同的答案，出现了新的问题，所以我想我会在这里完整地发布问题。

评论在我的JavaScript代码中，我想循环遍历report.persons。

在所有解决方案中，我发现它们可以直接指向“标题”或“文本”，就像我之前所做的那样，但在这种情况下，我只有一个键和值。我该如何做这样的事情？

<li><p> persons.key </p><p> persons.value </p></li>

我知道我将不得不做另一个for循环，但是我的知识还不足以让我自己弄清楚如何构建它。

Answer 1

这是非常基本的东西

var personsMarkup = "";
for (var i in persons){
   if (persons.hasOwnProperty(i)){
     console.log(i);          // the key
     console.log(persons[i]); // the value
     // cancat this all together
     personsMarkup =+ "<li><p>"+i+"</p><p>"+persons[i]+"</p></li>";
   }
}

然后：

$('#reports').append(
    /* ... */
    '<ul class=\"report-moreinfo\">' +
    personsMarkup +
    '</ul>';
    /* ... */
);

Answer 2

使用for (.. in ..)

$('#reports').append(
    '<div class="report-description">' +
      '<h2>' + report.header + '</h2>' +
      '<p>' + report.text + '</p>' +
    '</div>' +
    '<ul class=\"report-moreinfo\">');

for (var personKey in report.persons){
  $('#reports').append('<li><p>' + personKey + '</p><p>' + report.persons[personKey] + '</p></li>');
}

$('#reports').append(
    '</ul>'
);

Answer 3

对于你的代码，我会使用一个循环遍历reports.persons并返回你需要的函数：

var showPersons = function(persons){
  var appendedData = '';
  for (var person in persons) {
    if (!persons.hasOwnProperty(person)) continue;
    appendedData += '<li><p>' + person + '</p><p>' + persons[person] +'</p></li>'
  }
  return appendedData;
};

现在，您可以使用此功能在<ul>标记中附加所有内容：

listPersons(report.persons);

如果您希望代码读取更接近您想要的内容（并且能够使用person.name和person.value），则需要使用以下格式的JSON：

{
    "projectReports": [
        {
            "header": "Headline",
            "text": "Description of item",
            "estimate": 10,
            "actual": 7,
            "persons": [
                {
                    "name": "Robert",
                    "value": 5
                },
                {
                    "name": "Erik",
                    "value": 10
                },
                {
                    "name": "Juan",
                    "value": 3
                }
            ]
        }
    ]
}

JSON循环嵌套数组

3 个答案: