Как создать элемент и дочерние объекты из массива JSON - PullRequest
0 голосов
/ 26 марта 2019

Я пытаюсь создать галерею изображений с информацией, которую я извлек в файл JSON.Я только изучаю JS, и это моя самая большая проблема.

В галерее есть эти данные вместе с изображением, которое я вставлю позже.Эта информация взята из моей коллекции записей с помощью Discogs.

многие сайты предоставили мне некоторые решения, но не решили его полностью.

вот пример данных JSON, которые у меня есть

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

для создания элементов div из сценария Java с этой информацией и изображением размером около 100-200px ^ 2, которые являются гибкими.

Ответы [ 2 ]

0 голосов
/ 26 марта 2019

Перво-наперво, ваши данные не в формате 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>"
}
0 голосов
/ 26 марта 2019

Если вы уже обработали биты выборки, то это часть рендеринга. И если вы еще не обработали извлекаемые биты, то может помочь вам с этим . Современные браузеры реализуют очень мощный интерфейс выборки, где вы можете использовать

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){ ...});

Это позволяет нам что-то делать с каждым объектом в массиве. Поскольку они являются объектами, мы можем легко создать из них 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 и стилизация любого из его дочерних узлов) и откуда поступают изображения?

...