將 JSON 數組解析為表 HTML

Question

當我想從 json 獲取值時遇到問題

 const data = { "first_name": "Sammy", "last_name": "Shark", "location": "Ocean", "websites": [{ "description": "work", "URL": "https://www.digitalocean.com/" }, { "desciption": "tutorials", "URL": "https://www.digitalocean.com/community/tutorials" }], "social_media": [{ "description": "twitter", "link": "https://twitter.com/digitalocean" }, { "description": "facebook", "link": "https://www.facebook.com/DigitalOceanCloudHosting" }, { "description": "github", "link": "https://github.com/digitalocean" }] }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> var dataTarget = "https://tech/json-data.php"; $.getJSON(dataTarget, function(data) { var output; output += `<tr> <th scope="col">name</th> <th scope="col">description</th> <tbody>` $.each(data, function(key, val) { output += '<tr>'; output += '<td>' + val.websites.description + '<td>'; output += '</tr>'; output += '</tbody>'; }); $('table').html(output); }); </script>

但它顯示錯誤代碼“未捕獲的類型錯誤：無法讀取未定義的屬性'描述'”

Answer 1

如果您只需要網站描述，請使用data.websites作為$.each()參數，因為從data中您需要第二個循環/每個

 var data = { "first_name": "Sammy", "last_name": "Shark", "location": "Ocean", "websites": [{ "description": "work", "URL": "https://www.digitalocean.com/" }, { "description": "tutorials", "URL": "https://www.digitalocean.com/community/tutorials" } ], "social_media": [{ "description": "twitter", "link": "https://twitter.com/digitalocean" }, { "description": "facebook", "link": "https://www.facebook.com/DigitalOceanCloudHosting" }, { "description": "github", "link": "https://github.com/digitalocean" } ] } var output = '' $.each(data.websites, function(key, val) { output += '<tr><td>' + val.description + '</td></tr>'; }); //console.log(output) $('table').html(output);

 <table></table> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

它拋出一個錯誤，因為"websites"鍵是一個數組，而不是你應該通過引用它的索引號來訪問數組元素，如下所示：

output += "<td>" + val.websites[0].description + "<td>";