純JS JSON解析來自本地JSON文件的許多對象

Question

我對如何使用json感到困惑。 直到現在，我一直都不得不使用“ in-code”數組，我很樂意反復進行此類操作。

現在我必須解析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文件：單擊

Answer 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。

Answer 2

我會說這是正確的行為。 json.songs是要輸出到DOM的JavaScript對象數組。 如果要顯示json.songs內容，則必須遍歷對象並使用實際值。

也許這段代碼可以說明不同之處：

 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>

Answer 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);

純JS JSON解析來自本地JSON文件的許多對象

問題描述

3 個解決方案

解決方案1
2 2018-08-18 08:20:49

解決方案2
2 已采納 2018-08-18 08:33:50

解決方案3
1 2018-08-18 09:04:21

純JS JSON解析來自本地JSON文件的許多對象

問題描述

3 個解決方案

解決方案1 2 2018-08-18 08:20:49

解決方案2 2 已采納 2018-08-18 08:33:50

解決方案3 1 2018-08-18 09:04:21

解決方案1
2 2018-08-18 08:20:49

解決方案2
2 已采納 2018-08-18 08:33:50

解決方案3
1 2018-08-18 09:04:21