纯 JS json 解析与本地 JSON 文件中的许多对象答案

【问题标题】：Pure JS json parsing with many objects from local JSON file纯 JS json 解析与本地 JSON 文件中的许多对象
【发布时间】：2019-01-25 03:54:10
【问题描述】：

我对如何使用 jsons 感到困惑。到目前为止，我总是不得不使用“代码内”数组，我可以轻松地对其进行迭代等。

现在我必须解析 json 文件并从中获取数据，但我对 DOM 元素的输出是：

[object Object],[object Object],[object Object],[object Object]

等等等等。

有人能解释一下我应该如何让事情发挥作用吗？

我目前的代码：

<h1 id="json" onclick="json();">click</h1>
<script>
function json(){
  $.getJSON("./assets/songs.json", function(json) {
    console.log(json);
    document.getElementById('json').innerHTML = json.songs;
  });
}

我使用的 .json 文件的链接：click

【问题讨论】：

尝试console.log(JSON.stringify(json)); 使其可读。

标签： javascript html arrays json parsing

【解决方案1】：

function json(){
var url = "http://davidpots.com/jakeworry/017%20JSON%20Grouping,%20part%203/data.json";

$.getJSON(url, function (json) {
        console.log(JSON.stringify(json.songs));
       document.getElementById('json').innerHTML = JSON.stringify(json.songs);

});

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h1 id="json" onClick="json()">click</h1>
</body>

使用JSON.stringify(json) 获取字符串格式的 JSON。

【讨论】：

console.log(Uncaught TypeError: json is not a function);这不起作用，我应该有 jquery 还是我缺少的东西，也许有一个库可以帮助管理所有数据？
JSON你用过这个是大写的吗？
我复制粘贴了。
你能分享一个 jsfiddle 链接吗？
感谢您的帮助！您的演示按预期工作，但上面的答案更具解释性。虽然感谢您为我节省时间！

【解决方案2】：

我会说这是正确的。 json.songs 是您要输出到 DOM 的 JavaScript 对象数组。如果您想显示 json.songs 内部的内容，您必须遍历对象并使用实际值。

也许这个sn-p可以说明区别：

const json = JSON.parse('{"songs":[{"title":"1904","artist":"The Tallest Man on Earth","year":"2012","web_url":"http://www.songnotes.cc/songs/78-the-tallest-man-on-earth-1904","img_url":"http://fireflygrove.com/songnotes/images/artists/TheTallestManOnEarth.jpg"},{"title":"#40","artist":"Dave Matthews","year":"1999","web_url":"http://www.songnotes.cc/songs/119-dave-matthews-40","img_url":"http://fireflygrove.com/songnotes/images/artists/DaveMatthews.jpg"}]}');

// Put the objects inside the <p>
document.querySelector(".objects").textContent = json.songs
// Put a string of the objects in the <p>
document.querySelector(".objectString").textContent = JSON.stringify(json.songs);
// Use the actual value
document.querySelector(".value").textContent = json.songs[0].artist;

<p class="objects"></p>
<p class="objectString"></p>
<p class="value"></p>

【讨论】：

谢谢！我在中间，因为@McRist 也给了我一个答案，但你的解释性更强，所以我认为你会被标记为“答案”。现在清楚多了！
还有一件事，当解析我的本地文件，而不是已经在代码中定义的数组时，我应该怎么做呢？使用 Jquery 来获取它，或者...？
@ŁukaszFormela 是的，您可以使用 Jquery getJSON 方法。
使用任何你认为适合你想要达到的目标的工具。在您的情况下使用 jQuery 很好。如果您想采用香草 JS 方式，请查看 using fetch()

【解决方案3】：

JSON转换有两个函数：

JSON.parse() >> 接受 JSON 作为参数并返回 javascript 对象
JSON.stringify() >> 接受 JS 对象作为参数并返回一个 JSON 字符串

例如：

let Object = {
  prop1: 1,
  prop2: 2
}

let JSONstring = JSON.stringify(Object);

console.log(JSONstring);
console.log(typeof JSONstring);

let objectAgain = JSON.parse(JSONstring);

console.log(objectAgain); // bugs in SO try in JSbin

console.log(typeof objectAgain);

【讨论】：

太好了！我希望它在 W3C 或 MDN 上如此清晰。我不知道为什么，但他们的例子要么令人困惑，要么我对这些东西太陌生。
是的，它们有时对初学者不太欢迎，只需编写大量代码，您的一般知识就会增加。然后你就知道在哪里可以找到相关信息；）