Consume a JSON with Javascript!

Question

I have a JSON with the following data of some products:

• Name
• Photo
• Price

And I have some HTML cards that I would like them to present themselves there; how could I consume this JSON to show it inside these cards.

NOTE: Cards are only spaces to enter the image, price and product name.

Answer 1

Place an ID on each of the HTML elements that will receive the information, for example using a Bootstrap 4 card:

<div class="card shadow" style="width: 18rem;">
    <img id="avatar" class="card-img-top" src="#" alt="Image">
    <div class="card-body">
        <h5 id="first_name" class="card-title"></h5>
        <p id="last_name" class="card-text"></p>
    </div>
</div>

Use the fetch of Javascript passing the URL of your API, in this example to put the data and the image of a user on the previous card we do:

const url = 'https://reqres.in/api/users/2'; // Troque pela URL da sua API

function readJson() {
    fetch(url)
        .then(response => {
            if (!response.ok) {
                throw new Error("Erro HTTP: " + response.status);
            }
            return response.json();
        })
        .then(json => {
            this.response = json;
            document.getElementById('avatar').src = response.data.avatar;
            document.getElementById('first_name').innerHTML = response.data.first_name;
            document.getElementById('last_name').innerHTML = response.data.last_name;
        })
        .catch(function () {
            this.dataError = true;
        })
}

readJson();

Follows the link of this example in operation.