0

这是我的 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循环，但我的知识还不够好，无法自己弄清楚如何构建它。

4

3 回答 3

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>';
    /* ... */
);
于 2013-06-18T08:08:38.007 回答
0

利用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>'
);
于 2013-06-18T08:17:51.010 回答
0

对于您的代码，我将使用一个循环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.nameand 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
                }
            ]
        }
    ]
}
于 2013-06-18T10:13:59.667 回答