Problem consuming API data and transferring a SRC to the ID

Question

I have the following HTML code:

<main>
  <blockquote class="blockquote text-center">Últimos produtos</blockquote>

  <!-- <INICIO CARDS> -->
  <div class="primeira-card">
    <div class="card-deck">
      <div class="card bg-dark">
        <img id="imagem-produto" class="img-responsive" src="#" alt="Card image cap">
        <div class="card-body">
          <h5 id="nome-do-produto" class="card-title"></h5>
          <p id="valor-do-produto" class="card-text"></p>
        </div>
      </div>
      <div class="card bg-dark">
        <img id="imagem-produto" class="img-responsive" src="#" alt="Card image cap">
        <div class="card-body">
          <h5 id="nome-do-produto" class="card-title"></h5>
          <p id="valor-do-produto" class="card-text"></p>
        </div>
      </div>
      <div class="card bg-dark">
        <img id="imagem-produto" class="img-responsive" src="#" alt="Card image cap">            
        <div class="card-body">
          <h5 id="nome-do-produto" class="card-title"></h5>
          <p id="valor-do-produto" class="card-text"></p>
        </div>
      </div>
    </div>
  </div>
  <div class="segunda-card">
      <div class="card-deck">
        <div class="card bg-dark">
        <img id="imagem-produto" class="img-responsive" src="#" alt="Card image cap">
          <div class="card-body">
            <h5 id="nome-do-produto" class="card-title"></h5>
            <p id="valor-do-produto" class="card-text"></p>
          </div>
        </div>
        <div class="card bg-dark">
          <img id="imagem-produto" class="img-responsive" src="#" alt="Card image cap">
          <div class="card-body">
            <h5 id="nome-do-produto" class="card-title"></h5>
            <p id="valor-do-produto" class="card-text"></p>
          </div>
        </div>
        <div class="card bg-dark">
          <img id="imagem-produto" class="img-responsive" src="#" alt="Card image cap">
          <div class="card-body">
            <h5 id="nome-do-produto" class="card-title"></h5>
            <p id="valor-do-produto" class="card-text"></p>
          </div>
        </div>
      </div>
    </div>

  <!-- <FIM CARDS> -->
</main>

But always when I request the image items from products.json he carries none.

Someone could help me believe that there is some error in the Javascript syntax itself.

I’m consuming it with the following code:

const url = 'https://thaleshenrique38.000webhostapp.com/products.json';

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('nome-do-produto').innerHTML = json[0].name;
  document.getElementById('valor-do-produto').innerHTML = json[0].Value;
  document.getElementById('imagem-produto').src = json[0].images.imageUrl
 })
 .catch(function () {
  this.dataError = true;
 })
}

readJson();

If anyone can help me, I’d appreciate it.

CODEPEN: https://codepen.io/thales-henrique/pen/JzxXQQ

Answer 1

The return of fetch is stored in the variable json:

.then(json => {
      ↑↑↑

So instead of response.data.name, should be json.name. However, since the return is an array of objects, so only json.name would-be Undefined. Then you would need indexes, like for example: json[0].name, json[1].name up to array size -1.

What you should do is wear a bow tie for to scroll through all objects in the array, only another problem arises: how are you using id’s to upload one innerHTML, will not work because a id should be unique on the page.

The for you could do so:

for(var item of json){
   console.log(item);
}

Where item is each object of the array. So to take, for example, the value of the key name, you do so:

for(var item of json){
   console.log(item.name);
}