1

Fiz este código javascript:

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
   })
}

Mas ele exibe somente o ultimo registro do array, exemplo:

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

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

Podem ajudar a fazer com que ele exiba todo array?

2 Respostas 2

2

Declare a variável html antes do laço, e somente após o laço insira tudo de uma vez no elemento #ajax. Também não há necessidade de ficar repetindo o html em cada concatenação, pode ir somando as linhas com +, irá lhe economizar alguns preciosos bytes de código:

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
}

Exemplo:

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>

0

O problema já foi explicado pelo @dvd, que é o facto de a variável html ter de ficar antes do forEach e apenas modificada dentro. No entanto para o caso que tem torna-se bem mais simples utilizar template literals.

Veja como ficaria:

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
}

O inicio e fim da string é com ` e cada valor é interpolado no meio com ${valor}.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .