List JSON data with Javascript

Question

I’m trying to list the data of a JSON through Javascript, but it only presents in the list a position 0.

Below follows the JSON:

[
   {
      "id":"23"
   },
   {
      "id":"24"
  }
]

I have the following code below which is a return of an AJAX request:

success: function(getApi) {


  for (var i = 0; i < getApi.length; i++) {
    var id = getApi[i].id;


    var dados = '<li class="list-group-item">' +
      '<a href="#" class="media shadow-15">' +
      '<div class="w-auto h-100">' +
      '<figure class="avatar avatar-40"><img src="img/espaco.jpg" alt=""> </figure>' +
      '</div>' +
      '<div class="media-body">' +
      '<h5 class=" mb-0">' + id + '</h5>' +
      '<p><span class="badge mb-1">Teste</span></p>' +
      '</div>' +
      '</a>' +
      '</li> ';

    $(".resultApi").html(dados);
  }
}

How do I show them all IDs of my JSON?

Answer 1

It’s because you’re wearing .html() when you should use .append(). The .html() will replace the HTML of the target element with each iteration in for, resulting only the code of the last for. Should be:

$(".resultApi").append(dados);

Also check that dados is a parsed JSON (probably is). If you don’t need to include the option in your Ajax:

dataType: "json",

Answer 2

Your problem is that you are redefining the HTML of the item after each iteration (loop). This will only make the last ID of the array be shown, since all previous ones have been reset by the following iteration.

So instead of redefine the content, you should simply add the data generated in each iteration to the previously created data.

---

See your problem in a slightly simpler example:

const $list = $('#my-list')
const ids = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }]

for (let i = 0; i < ids.length; i++) {
  const id = ids[i].id
  const html = `<li>${id}</li>`
  
  console.log('ID atual:', id, ' | HTML atual:', html)
  
  // Note que, ao invés de você acrescentar o HTML gerado ao final da lista,
  // você simplesmente está redefinindo todo o HTML definido anteriormente,
  // ao usar o método .html().
  $list.html(html)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="my-list"></ul>

To resolve this, as mentioned earlier, you need to add the HTML generated to final of the list. For this, we will use the method append jQuery. So:

const $list = $('#my-list')
const ids = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }]

for (let i = 0; i < ids.length; i++) {
  const id = ids[i].id
  const html = `<li>${id}</li>`
  
  console.log('ID atual:', id, ' | HTML atual:', html)
  
  // Agora, ao invés de redefinir o HTML após cada iteração, estamos simplesmente
  // acrescentando o HTML gerado ao conteúdo, já existente, da lista:
  $list.append(html)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="my-list"></ul>

---

So, in your code, you must change the html (replacing existing HTML with a new HTML) by append (adding a new HTML to an existing HTML). From:

$(".resultApi").html(dados);

To:

$(".resultApi").append(dados);

Answer 3

You can use jQuery to call your json file to display its full list.

$(document).ready(function() {

function dadosJson() {
    $.getJSON('dados.json', function(json) {
        $.each(json, function() {
            let info = '<p>' + this['id'] + '</p>';
            $('#boxTeste').append(info);
        });
    });/*GetJson end*/ 
}/*function end*/ 

    dadosJson();

});

$.getJSON will fetch your file with the json, the function .each will scroll through your json file searching for the 'id' parameters and displaying them when creating them through Function .append(info) within the da div specifies