Listando dados de um JSON com JQUERY | Front-end

Solucionado (ver solução)

Solucionado
(ver solução)

5
respostas

por Vittorio Andrade Barella

| 196.4k xp | 57 posts

Olá boa tarde, Tenho um arquivo json pronto e preciso exibir os dados dele em uma tabela em html.

Alguém sabe como eu posso fazer ?

Segue o server.json

{"encomendas":[ { "id" : 763, "codigo" : "QWE-67Y", "valor" : 312.21, "entregue" :false, "data" : "2014-12-17T01:08:13Z", "cliente" : { "nome" : "Corporação Exemplo", "id" : 1 } },

{ "id" : 312, "codigo" : "QWE-72Y", "valor" : 27.00,    "entregue" :false, "data" : "2014-12-14T11:12:43Z", 
  "cliente" : { "nome" : "Investidores ricos", "id" : 2 } 
},

{ "id" : 467, "codigo" : "RTY-42Z", "valor" : 1731.99,  "entregue" :false, "data" : "2014-12-12T21:23:23Z", 
  "cliente" : { "nome" : "Corporação Exemplo", "id" : 1 } 
},

{ "id" : 985, "codigo" : "UTR-43Y", "valor" : 141.00,  "entregue" :false, "data" : "2014-12-10T09:02:52Z", 
  "cliente" : { "nome" : "Nitro Digital", "id" : 3 } 
},

{ "id" : 235, "codigo" : "UTR-42Y", "valor" : 35.00,    "entregue" :false, "data" : "2014-12-10T08:34:45Z", 
  "cliente" : { "nome" : "Corporação Exemplo", "id" : 1 } 
},

{ "id" : 406, "codigo" : "QWE-65Z", "valor" : 294.00,   "entregue" :false, "data" : "2014-12-09T12:54:56Z", 
  "cliente" : { "nome" : "Corporação Exemplo", "id" : 1 } 
},

{ "id" : 146, "codigo" : "YODA-67Y", "valor" : 1430.00,  "entregue" :true, "data" : "2014-11-21T18:45:49Z", 
  "cliente" : { "nome" : "Nitro Digital", "id" : 3 } 
},

{ "id" : 401, "codigo" : "YODA-83Y", "valor" : 120.30,   "entregue" :true, "data" : "2014-11-09T15:54:18Z", 
  "cliente" : { "nome" : "Investidores ricos", "id" : 2 } 
},

{ "id" : 125, "codigo" : "LKS-81Y", "valor" : 772.00,   "entregue" :true, "data" : "2014-11-02T19:23:18Z", 
  "cliente" : { "nome" : "Corporação Exemplo", "id" : 1 } 
},

{ "id" : 521, "codigo" : "QWE-12Y", "valor" : 42.00,    "entregue" :true, "data" : "2014-10-12T14:27:15Z", 
  "cliente" : { "nome" : "Nitro Digital", "id" : 3 } 
}

] }

5 respostas

solução!

por Lucas de Azevedo Godoi Lomba

| 158.4k xp | 27 posts

Front-end

24/08/2020

$(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 irá buscar seu arquivo com o json, a função .each irá percorre o seu arquivo json buscando os parametros 'id' e exibindo eles ao cria-los através da function .append(info) dentro do da div especifica

nesse caso ira listar dentro dos

, precisa adaptar para uma tabela. espero ter ajudado um pouco!

por Vittorio Andrade Barella

| 196.4k xp | 57 posts

24/08/2020

Ok mas com eu chamo no html ?

por Lucas de Azevedo Godoi Lomba

| 158.4k xp | 27 posts

Front-end

24/08/2020

basicamente você vai montar todo seu elemento no javascript, e depois ira passar o id de onde quer exibir, como abaixo

$('#idOndeQuerExibir').html(elementoQueQuerExibir)

um exemplo com uma tabela

let repetir = 0 //comeca da posicao um do array
let tamanho = response.length //conta o tamanho do array

let elemento //elemento onde vai armazenar


        while (repetir< tamanho) {
              elemento += "<tr>"
              elemento += "<td>" + response[repetir].valor1 + "</td>";
              elemento += "<td>" + response[repetir].valor2+ "</td>";
              elemento += "<td>" + response[repetir].valor3 + "</td>";
              elemento += "</tr>"

            repetir+= 1   
        }
        $('tbody#idElemento').html(elemento)

por Vittorio Andrade Barella

| 196.4k xp | 57 posts

24/08/2020

Segue como esta minha tabela e o idElemento do seu exemplo seria o id=tblCadastro do meu ?

Código	Nome do Cliente	Valor	Valor Final	Data de Entrega

por Vittorio Andrade Barella

| 196.4k xp | 57 posts

24/08/2020

Esse id não tem que ir no tbody do html ?