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 ?

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