I want to view all json array records

Question

I made this javascript code:

function ajax(response) {
    var dados = response
    JSON.parse(dados).forEach( function (registro){
        var html = "<tr>"
        html += "<td>"
        html += registro.nome
        html += "</td>"
        html += "<td>"
        html += registro.sobrenome
        html += "</td>"
        html += "<td>"
        html += registro.telefone
        html += "</td>"
        html += "<td>"
        html += "<div class='btn bg-"+ registro.cor_status +"'>"
        html += "<i class='material-icons'>"+registro.icons_status+"</i>"
        html += "<span>"+registro.nome_status+"</span>"
        html += "</div>"
        html += "</td>"
        html += "</tr>"
        document.getElementById('ajax').innerHTML= html
   })
}

But it displays only the last array record, example:

var json = [{"id":"1","nome":"Alex"},{ "id":"2", "nome":"felipe"}, {"id":"3", "nome":"silvia"}]

//retorna so o {"id":"3", "nome":"silvia"}

Can help make it display every array?

Answer 1

Declare the variable html before the loop, and only after the loop insert everything at once into the element #ajax. Also no need to keep repeating the html in each concatenation, you can add the lines with +, will save you some precious bytes code:

function ajax(response) {
    var dados = response
    var html = ""
    JSON.parse(dados).forEach( function (registro){
       html += "<tr><td>"
       +registro.nome
       +"</td><td>"
       +registro.sobrenome
       +"</td><td>"
       +registro.telefone
       +"</td><td>"
       +"<div class='btn bg-"+ registro.cor_status +"'>"
       +"<i class='material-icons'>"+registro.icons_status+"</i>"
       +"<span>"+registro.nome_status+"</span>"
       +"</div>"
       +"</td></tr>"
   })
   document.getElementById('ajax').innerHTML= html
}

Example:

var dados = [{"id":"1","nome":"Alex","sobrenome":"Souza","telefone":"123","cor_status":"verde","icons_status":"0","nome_status":"lex" },
{"id":"2", "nome":"felipe","sobrenome":"Gomes","telefone":"456","cor_status":"azul","icons_status":"1","nome_status":"lipe"},
{"id":"3", "nome":"silvia","sobrenome":"Silva","telefone":"789","cor_status":"vermelho","icons_status":"2","nome_status":"sisi"}]
function ajax(response) {
    var dados = response
    var html = ""
    JSON.parse(dados).forEach( function (registro){
        html += "<tr><td>"
        +registro.nome
        +"</td><td>"
        +registro.sobrenome
        +"</td><td>"
        +registro.telefone
        +"</td><td>"
        +"<div class='btn bg-"+ registro.cor_status +"'>"
        +"<i class='material-icons'>"+registro.icons_status+"</i>"
        +"<span>"+registro.nome_status+"</span>"
        +"</div>"
        +"</td></tr>"
   })
   document.getElementById('ajax').innerHTML= html
}

ajax(JSON.stringify(dados));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="ajax"></table>

Answer 2

The problem has already been explained by @dvd, which is the fact that the variable html have to stay before the forEach and only modified inside. However for the case you have it becomes much simpler to use literals template.

See how it would look:

function ajax(response) {
    var dados = response
    var html = ""

    JSON.parse(dados).forEach(function (registro){
        html += `<td>${registro.nome}</td>
                 <td>${registro.sobrenome}</td>
                 <td>${registro.telefone}</td>
                 <td>
                     <div class='btn bg-${registro.cor_status}'>
                         <i class='material-icons'>${registro.icons_status}</i>
                         <span>${registro.nome_status}</span>
                     </div>
                 </td>`
   })
   document.getElementById('ajax').innerHTML = html
}

The beginning and end of the string is with ` and each value is interpolated in the middle with ${valor}.