将 JSON 数据附加到 HTML 元素

debugcn 发表于 Dev

迪恩·库尔斯托克

我试图：

使用 $.get 获取 JSON 数据
将该数据附加到 HTML 元素 $('photos') 以便使用外部 JSON 文件而不是内嵌 HTML 显示图像。

我没有收到任何控制台错误，图像也没有显示。任何帮助将非常感谢。非常感谢。我有一个警报来检查 JSON 是否已加载，并且加载良好 - 只是不会更改任何数据。

这是我目前的设置：

(JSON): photoData.json

{  "photos": {
"1": {
  "href": "./photos/photo1.JPG",
  "src": "photos/photo1.JPG",
},
"2": {
  "href": "./photos/photo2.JPG",
  "src": "photos/photo2.JPG",
},
"3": {
  "href": "./photos/photo3.JPG",
  "src": "photos/photo3.JPG",
},
"4": {
  "href": "./photos/photo4.JPG",
  "src": "photos/photo4.JPG",
},
"5": {
  "href": "./photos/photo5.JPG",
  "src": "photos/photo5.JPG",
}}}

jQuery：

$.get("./data/photoData.json", function(photos){
alert("Data Loaded: " + photos);
let htmlStr = "";
for (let i = 0; i < photos.length; i++){
    htmlStr += `<figure><a href="${photos[i].href}"><img src = "${photos[i].src}"></img></a></figure>`
}
$('Photos').html(htmlStr);});

安迪

photos是对象的对象而不是数组。所以for...in改用：

$.get("./data/photoData.json", function(data) {
  const photos = data.photos;
  let htmlStr = '';
  for (let photo in photos) {
    htmlStr += `<figure><a href="${photos[photo].href}"><img src="${photos[photo].src}"></img></a></figure>`
  }
});

并且在评论中提出了一些问题：$('Photos')不是有效的 jQuery 选择器。我怀疑你有一个叫做ID的元素Photos-你只需要散列添加到选择：$('#Photos')。

演示

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。