want to display all json array records

Question

want to display all json array records

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

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 only displays the last record of the array, eg:

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

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

Can you help make it display every array?

javascript json

asked by anonymous 15.03.2018 / 22:25

2 answers

0

The problem has already been explained by @dvd, which is that the html variable must be before forEach and only modified inside. However for the case that has become much simpler use template literals .

Here's 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 start and end of the string is with ' and each value is interpolated in the middle with ${valor} .

15.03.2018 / 22:43

Automatic scrolling for audio playing in a playllist Browse the best-selling product

score 2 · Accepted Answer

Declare the variable html before the loop, and only after the loop insert everything at once into the #ajax element. There is also no need to repeat html in each concatenation, you can add the lines with + , it will save you some precious 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><tableborder="1" id="ajax"></table>