Question

我正在努力：

使用$ .get
将该数据附加到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);});

Answer 1

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选择器。我怀疑你有一个名为Photos的id的元素 - 你只需要将哈希添加到选择器：$('#Photos')。

<强> DEMO

将JSON数据附加到HTML元素

1 个答案: