javascript - 将同名的JSON数据放到不同的div中

Question

我有这种结构的 JSON 文件:

{
  "launches": [{
    "name": "First Name"
  }],
  "launches": [{
    "name": "Second Name"
  }],
  "launches": [{
    "name": "Third Name"
  }],
  "launches": [{
    "name": "Fourth Name"
  }]
}

我这样添加数据:

$('#div-name').append(d.name);

当它显示在网页上时，它被放置在一个没有空格的 div 中。我可以添加 <p>标记到追加，但仍然显示所有数据并创建新的 div 来显示它。

基本上，我想做的是为每个单独的“名称”值创建一个 div，并且每个 div 只显示一个值。

Answer 1

首先，您的“json”不是有效的 json，请记住在 json 对象中，您不能有重复的键。您可以轻松使用 an online validator帮助你解决这个问题......在你修复它之后，让我们假设你实际拥有的是一个对象数组，如:

[
    {"name": "Falcon 9"},
    {"name": "Orion"},
    {"name": "PSLV"},
    {"name": "Soyuz"}
]

使用这个有效的 json，您可以轻松地遍历所有元素，例如(并认为您正在使用 jQuery):

var json = [ ... ];

$(function() {
    $.each(json, function(i, item){
        $("p").append("<div>" + item.name + "</div>");
    });
});

这是一个现场测试:https://jsbin.com/bixadegeye/1/edit?html,css,js,output