How to fill html with local JSON data?

by

I’m new to javascript and the use of json.
What I want to do is really simple, yet I’m struggling with it.

I need to build a website with two pages, one that show artists, the others show their works. I need to build it dynamically only with javascript and the help of a json file.

So I’ve already build the two pages with html and Css and let some empty space to fill it with the data.
For example here is a template for the artist :

<div class="artists-id">
  <a class="frame-link"href="">
    <img id= "photo" class="photo" src=""></img>
  </a>
  <h2 id="name" class="name"></h2>
  <span class="description">
    <p id= "location" class="location"></p>
    <p id= "tagline" class="catchphrase"></p>
    <p id= "price" class="price"></p>
  </span>
  <span class="label">
    <ul class= "tags-label">
      <li class="tag-elm">
        <a href="#" id= "tag" class= "tag"></a>
      </li>
    </ul>
  </span>
</div>

I also have a JSON file (internal not external !) with all the data that look like this :

{
    "artists": [
      {
        "name": "Boris Kein",
        "id": 801,
        "city": "London",
        "country": "UK",
        "tags": ["portrait", "events", "travel", "animals"],
        "tagline": "Beauty is everywhere",
        "price": 400,
        "portrait": "BorisKein.jpg"
      },

So far I was just able to fetch the data like that :

async function fetchData() {
    const response = await fetch("javascript/data.json");
    const data = await response.json();
    console.log(data);
};
fetchData();

Now I’m little lost how can I use my data to fill the blank space in my html ?

7 thoughts on “How to fill html with local JSON data?”

  1. First of all select all the elements you want to fill in with querySelector or whichever method you want.

    Let’s say we select the "name" class and we will fill it with the name coming from Json data. We can do it like this;

    name.innerHTML = data.artists[0].name //according to your data

    Reply

  2. The easiest way to turn you values into elements is by using Template literals. Create a function which takes in a single artist object. Make that function return a template literal string with the values of the artist.

    Now all you have to do is loop over each artist and create a template string per artist. Then add all those template strings to the body.

    const data = {
  "artists": [{
    "name": "Boris Kein",
    "id": 801,
    "city": "London",
    "country": "UK",
    "tags": ["portrait", "events", "travel", "animals"],
    "tagline": "Beauty is everywhere",
    "price": 400,
    "portrait": "BorisKein.jpg"
  },]
};

/**
 * Create one big string with interpolated values
 */
const createArtistHTML = ({
  name,
  id,
  city,
  country,
  tags,
  tagline,
  price,
  portrait
}) => `
  <div class="artist" id="artist-${id}">
    <a class="frame-link" href="#">
      <img class="photo" src="${portrait}" alt="${name}"/>
    </a>
    <h2 class="name">${name}</h2>
    <span class="description">
      <p class="country">${country}</p>
      <p class="city">${city}</p>
      <p class="tagline">${tagline}</p>
      <p class="price">${price}</p>
    </span>
    <span class="label">
      <ul class="tags-label">
        ${tags.map(tag => `
          <li class="tag-elm">
            <a href="#" class="tag">${tag}</a>
          </li>`
        ).join('')}
      </ul>
    </span>
  </div>`;
 
// Create the HTML for each artist.
const artists = data.artists.map(createArtistHTML);

// And add it for each HTML template to the body.
artists.forEach(artist => {
  document.body.innerHTML += artist;
});
    Reply

Leave a Comment