将同名的JSON数据放到不同的div中答案

【问题标题】：Put JSON data with the same name into different divs将同名的JSON数据放到不同的div中
【发布时间】：2017-06-22 15:23:49
【问题描述】：

我有这种结构的 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 只显示一个值。

【问题讨论】：

那个 JSON 准确地描述了 JSON 不应该用于什么。
第一个示例中对象的语法无效，因为除了字符串周围没有引号外，您不能有重复的属性名称。如果您需要这种数据结构，请将数组放在单个属性中。然后就是遍历那个数组的简单过程
我认为我的示例过于简单了 - 我使用的 JSON 来自这里：[link] (launchlibrary.net/1.2/launch/next/5)。 name 属性放置在 launch 数组中。
我怀疑你错误地复制了你的 json。那个 json 不会有你描述的结果。您能否提供实际的 json（在您的问题中）以及我们可以测试的完整代码示例？包含html？

标签： javascript jquery html css json

【解决方案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

【讨论】：

我相信 Array.forEach 绕过了加载 jQuery 的需要。
@FreemanLambda 在他的问题中，他已经使用了 jQuery ......只是因为这个，如果他有问题甚至不知道有效的 json 对象是什么样子，我假设留在 jQuery 中为了简单起见......
验证器已经多次发现我的错误。谢谢@balexandre

【解决方案2】：

一种稍微不同的处理方式：

var data = {
  "names": [
    "Falcon 9",
    "Orion",
    "PSLV",
    "Soyuz"
  ]
};

$.each( data["names"], function( key, value ) {
    $('#div-name').append(value+"<br />");
});

【讨论】：