how to create an element and children with objects from json array

Question

I'm trying to make a gallery of images with the information I have extracted into a JSON file. I'm just learning JS, and this is my biggest challenge yet.

The gallery with have this data along with an image i will insert later. This information is from my collection of records via discogs.

alot of sites have provided me some of solution but havn't solved it completely.

here is an example of JSON data I have

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

to create div elements from java script with this information and an image around 100-200px^2 that are flex.

Answer 1

If you have already handled the fetch bits, then it's the rendering part. And if you haven't already handled the fetching bits, then this might help you with that . Modern browsers implement a very powerful fetch interface, where you can use

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

But in your case, rather than simply console.log() at that last point, you would want to do something a little different. You want to iterate over each node in the array, and turn it into an actual HTML node.

So the first step would be to do something to each member of that array:

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

This lets us do something with each and every object in the array. As they are objects, we can build an HTML element from them easily, using Template Literals . These are a string, with javascript variables being inserted on the fly. Something like:

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>`;
});

All working well so far, but there's still something missing. We've created an HTML DOM node as a string, but we still need to stick it into a container element. For convenience, we'll pretend we have a container with the class 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;
});

Now, there are only two things missing: the CSS to style all this (best way? style the .album , and style any of its descendant nodes), and where are the images coming in from?

Answer 2

First things first, your data isn't a JSON. It is an array of JSONs. As you want to list the elements, this might work:

Let's create an array with the properties names to easily list it

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

To list each item from the array:

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>"
}