Question

Hello堆栈溢出社区，我现在已经停留了一段时间，即使我经历了很多帖子试图解决它，我仍然不知道哪种方式最适合我的情况来管理显示我的我的HTML上的JSON。

首先，我的JSON是一个变长字符串，由我的php代码发送并通过XMLHttpRequest在JS中接收

var return_data = xhr.responseText;

JSON格式示例：

"output":[
{
    "id":"13",
    "titre":"assiette servite xxx",
    "format":"dat",
    "date":"2016-09-10",
    "source":"DDT 68",
    "description":"exemple"
},
{
    "id":"16",
    "titre":"releve pollution atmospherique",
    "format":"shp",
    "date":"2014-01-05",
    "source":"agence qualite de l air",
    "description":"exemple"
},

我设法只显示我的JSON字符串：

document.getElementById("status").innerHTML = return_data;

但是在这里我宁愿循环它以便设置样式，然后将其发送到我的HTML。我尝试了很多不同的循环而没有成功（例如How do I iterate through this JSON object in jQuery?）

我需要解析我的字符串：

var jay = JSON.parse(return_data);

但是我仍然没有设法使用不同的实体并在我的HTML中显示

    <div id="status"></div>

id 1

滴度格式日期

id 2

滴度格式日期

我还在努力并进行测试，希望在此期间也许有人可以给我提示或解释我做错了什么。

测试失败的例子：

for(var i=0; i < jay.length; i++)
{
  var add = jay[i]['titre'];
}
document.getElementById("status").innerHTML = add;

干杯。

Answer 1

你应该添加两个括号来从服务器包装你的JSON，这不是一个正确的JSON格式，这是：

{ "output":[
       {
        "id":"13",
        "titre":"assiette servite xxx",
        "format":"dat",
        "date":"2016-09-10",
        "source":"DDT 68",
        "description":"exemple"
       },
       {
        "id":"16",
        "titre":"releve pollution atmospherique",
        "format":"shp",
        "date":"2014-01-05",
        "source":"agence qualite de l air",
        "description":"exemple"
       },
    }

你必须在循环中添加输出级别：

for(var i=0; i < jay.output.length; i++)
{
  var add = jay.output[i]['titre'];
}

欢呼声

修改

var add = []; for(var i=0; i < jay.output.length; i++) { add.push(jay.output[i]['titre']); } document.getElementById("status").innerHTML = add.join(', ');

这将显示以逗号分隔的所有元素。

干杯

Answer 2

使用Array.map（）

的更简洁的解决方案

document.getElementById("status").innerHTML = jay.output.map(function(obj){
   return obj.titre;
}).join(', ');

在显示之前与我的JSON对象交互

2 个答案: