如何将 JSON 附加到 div答案

【问题标题】：How to append JSON to div如何将 JSON 附加到 div
【发布时间】：2017-03-20 03:59:28
【问题描述】：

我是 Web 开发的新手，我很难将 JSON 附加到 div 以便将值显示在网页上。我检查了其他问题，但大多数回复都与 PHP 相关，这不是我的情况。任何人都可以帮我弄清楚我所缺少的就是不让 JSON 值不显示在网页上。以下是部分 JSON 文件内容：

{ "array": [
   "firstArray": {
    "firstKey": "firstValue",
    "secondKey": "secondValue"
   },
   "secondArray":{
    "firstKey": "firstValue",
    "secondKey": "secondValue"
   }
  ]     
}

这是 JavaScript 的一部分，我希望显示在上述 JSON 的第一个数组和第一个键下找到的值

function print(data){   // lets assume data represents the whole JSON data
var newDiv = $("<div />", {'id': 'new'})
newDiv.append($("<span />", data.array[0].firstArray.firstKey}))
}

我对 Web 开发非常陌生，我对学习非常感兴趣，所以请尽可能多地帮助我。

【问题讨论】：

Format and append JSON data to html div的可能重复
newDiv.append($("<span />", data.array[0].firstArray.firstKey})) - 错误在于最后一个冗余 }。同样通过该代码，内容将位于创建的span之外。
您在 JSON 中的firstArray 之后缺少"。这会导致它无效。
stackoverflow.com/questions/11197818/… ...只需在此处查看具有多个数组的 json 的正确语法..它有正确的语法

标签： javascript jquery css json

【解决方案1】：

尝试以下方法：

var data = { "array": [
   {"firstArray":{
    "firstKey": "firstValue",
    "secondKey": "secondValue"
   }},
   {"secondArray":{
    "firstKey": "firstValue",
    "secondKey": "secondValue"
   }}
  ]     
};

function print(data){  
    $('body').append($("<div id='new'/>"));
    $('body').append($("<div id='new2'/>"));

    $('#new').append($("<span>"+data.array[0].firstArray.firstKey+"   "+"</span>"));
    $('#new').append($("<span>"+data.array[0].firstArray.secondKey+"</span>"));

    $('#new2').append($("<span>"+data.array[1].secondArray.firstKey+"   "+"</span>"));
    $('#new2').append($("<span>"+data.array[1].secondArray.secondKey+"</span>"));
}

print(data);

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

您的解决方案是无价的。这正是我要找的那个。非常感谢。

【解决方案2】：

您的 json 字符串未经过验证。

已更正

{
"array": [{
    "firstArray": {
        "firstKey": "firstValue",
        "secondKey": "secondValue"
    }
}, {
    "secondArray": {
        "firstKey": "firstValue",
        "secondKey": "secondValue"
    }
}]

}

现在可以这样访问了，

data.array[0].firstArray.firstKey

【讨论】：

感谢您的参与。

【解决方案3】：

你可以试试这个

（我从 Mamun 的评论中扩展）

// using JQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> // using JQuery

<script>
//your array
var data = { "array": [
                    {
                    "firstKey": "firstValue",
                    "secondKey": "secondValue"
                    },
                    {
                    "firstKey": "firstValue",
                    "secondKey": "secondValue"
                    }
                ]     
            };


function print(data){  
    // loop for printing each element in array
    for (var i = 0; i < data.array.length; i++) {
        $('body').append($("<div id='new"+(i+1)+"'/>"));
        var id = "#new"+(i+1);
        $(id).append($("<span>"+data.array[i].firstKey+"   "+"</span>"));
        $(id).append($("<span>"+data.array[i].secondKey+"</span>"));
    };  
}

print(data);

</script>

【讨论】：