Question

我正在尝试创建一个包含我提取到JSON文件中的信息的图像库。我正在学习JS，这是我最大的挑战。

具有此数据的画廊以及稍后将插入的图像。这些信息来自我通过迪斯科舞会收集的记录。

许多站点为我提供了一些解决方案，但还没有完全解决。

这是我拥有的JSON数据的示例

https://github.com/zephur/discogs-onhand-record-collection/blob/master/collection.json

使用此信息从Java脚本创建div元素，并创建一张100-200px ^ 2左右的可弯曲图片。

Answer 1

如果您已经处理了获取位，那么它就是渲染部分。而且，如果您尚未处理提取位，请使用this might help you with that。现代浏览器实现了非常强大的提取界面，您可以在其中使用

fetch('http://example.com/movies.json')
  .then(function(response) {
    // here, we take the response from the fetch request, and convert it to a JSON
    // object, and pass that to the NEXT step.
    return response.json();
  })
  .then(function(myData) {
    // taking that JSON object, we can do something with it.
    //  In our particular case, we want to take that JSON, and turn it into a
    //  bunch of DOM nodes.
    console.log(JSON.stringify(myData));
  });

但是，在您的情况下，您将希望做一些不同的事情，而不是在最后一点简单地使用console.log（）。您想遍历数组中的每个节点，并将其转换为实际的HTML节点。

因此第一步将是对该数组的每个成员执行一些操作：

myData.forEach(function(item){ ...});

这使我们可以对数组中的每个对象进行处理。由于它们是对象，因此可以使用 Template Literals 轻松地从它们构建HTML元素。这是一个字符串，其中的JavaScript变量是即时插入的。像这样：

myData.forEach(function(item){
  let myContainer = `<div class='album'>
  <h2>${item.Artist} : ${item.Title}</h2>
  <p class='formats'>${item.Format}</p>
  <figure>
    <img src=''>
    <figcaption>${item.Title}</figcaption>
  </figure>
</div>`;
});

到目前为止，一切工作正常，但是仍然缺少一些东西。我们已经将HTML DOM节点创建为字符串，但是仍然需要将其粘贴到容器元素中。为了方便起见，我们假设我们有一个容器，容器的类为main-container：

myData.forEach(function(item){
  // this builds the HTML DOM node for our current item
  let myContainer = `<div class='album'>
  <h2>${item.Artist} : ${item.Title}</h2>
  <p class='formats'>${item.Format}</p>
  <figure>
    <img src=''>
    <figcaption>${item.Title}</figcaption>
  </figure>
</div>`;

// This line appends the string we just built into the DOM.
document.querySelector(".main-container").innerHTML += myContainer;
});

现在，只缺少两件事：CSS来设置所有样式（最好的方式？设置.album的样式，以及设置其后代节点的样式），以及图像从何而来？ >

Answer 2

首先，您的数据不是JSON。它是JSON数组。当您要列出元素时，这可能会起作用：

让我们使用属性名称创建一个数组以轻松列出它

var keys = Object.keys(data[0]);

要列出数组中的每一项：

for(var i = 0; i < data.length; i++){
    for(var j = 0; j < keys.length; j++){
       document.getElementById("my-div").innerHTML += keys[j] + ": " + data[i][keys[j]] + "<br>";
    }
    document.getElementById("my-div").innerHTML += "<br>"
}

如何使用json数组中的对象创建元素和子元素

2 个答案: