JSON complexo e acesso atributos com array javascript

Front-end JavaScript
, ,
#1

Boas

Estou com uma dificuldade. Tenho um JSON com array, atributos e atributos com array (complexo) e ele tem alguns valores de pedidos e nesses pedidos tem um atributo Produtos que é um array de objetos (com 3 atributos (sku, quantidade e preço_unitario).

Preciso ler esse JSON (já consegui com parse), depois percorrer ele atras de um certo pedido (também já consegui) quando acho o pedido, dentro dele tenho de ler os produtos, passar para um array javascript, depois carregar o Pedido e os produtos dentro de um novo JSON (ainda não fiz devido ao problema a seguir).

O PROBLEMA: Eu consigo ler o JSON atras do Pedido (comparando dentro de um for) mas depois eu não estou conseguindo, através deste pedido, ler os produtos que tem nele. E como esse atributo Produtos é um array, não consigo ler.

Eu fiz algumas coisas e preciso de ajuda.

Fato: não posso usar JQuery, node ou outro frame .Tem de ser com javascript puro e mais. Preciso usar um for aninhado (ou algo assim) para pelo menos ler esses valores.

Segue os códigos:

index.html

    <!DOCTYPE html>
    <html lang="pt-br">
      <head>
	      <title>Ler JSON</title>
		<script type="text/javascript" src="arrei.json"></script>
		<script type="text/javascript" src="script2.js"></script>
      </head>
      <body onload="lerJSON3()">
      </body>
    </html>

arrei.json

arrei =`[
   {
      "Pedido":5643234,
      "nome_cliente":"Adeilson Denaison Dorevato",
      "Produtos":[
         {
            "sku":"COR-4325",
            "quantidade":3,
            "preco_unitario":124
         },
         {
            "sku":"COR-1000",
            "quantidade":1,
            "preco_unitario":199.99
         }
      ]
   },
   {
      "Pedido":5643235,
      "nome_cliente":"Francisco Meira",
      "Produtos":[
         {
            "sku":"TES-4315",
            "quantidade":2,
            "preco_unitario":19.89
         }
      ]
   },
   {
      "Pedido":5643236,
      "nome_cliente":"Julio Simonete Nagal",
      "Produtos":[
         {
            "sku":"SAX-0121",
            "quantidade":2,
            "preco_unitario":750.03
         },
         {
            "sku":"COR-1000",
            "quantidade":2,
            "preco_unitario":199.99
         }
      ]
   },
   {
      "Pedido":5643237,
      "nome_cliente":"Adeilson Denaison Dorevato",
      "Produtos":[
         
      ]
   },
   {
      "Pedido":5643238,
      "nome_cliente":"Uóxinton Roseira",
      "Produtos":[
         {
            "sku":"CAB-4001",
            "quantidade":4,
            "preco_unitario":95.2
         },
         {
            "sku":"BRA-0087",
            "quantidade":20,
            "preco_unitario":9.99
         },
         {
            "sku":"SAX-0121",
            "quantidade":2,
            "preco_unitario":750.03
         },
         {
            "sku":"COR-1000",
            "quantidade":2,
            "preco_unitario":199.99
         }
      ]
   },
   {
      "Pedido":5643239,
      "nome_cliente":"Estive Em Austin",
      "Produtos":[
         {
            "sku":"COR-4325",
            "quantidade":3,
            "preco_unitario":124
         }
      ]
   }
]`;

script2.js

function lerJSON3() {
var dados = JSON.parse(arrei);

	var pedido = 5643238;
	var obj = [];
	var obj2 = [];
	
	for (var i = 0; i < dados.length; i++){
	
		obj = dados[i].Pedido;
			if(obj == pedido){
			document.write("Pedido selecionado: "+obj);
			}
			//ATE AQUI VAI OK. DAQUI NÃO LE OS PRODUTOS DENTRO DO PEDIDO BUSCADO
			for (var j = 0; j < obj.length; j++){
			obj2 = obj[i][j].Produtos;
			document.write("Produtos: "+obj2);
			
			}
		
		//var obj1 = dados[i].nome_cliente;
		
		
		/*document.write("Pedido: "+obj);
		document.write("<br>");
		document.write("Nome: "+obj1+"<br><br>");*/
		
		
		console.log(obj);
	}
	
}

Eu sou iniciante javascript, e sei que tem varias outras formas de fazer isso, mas para que eu consiga entender, gostaria de tentar assim. Desde já obrigado.

#2

eu nao entendi, explica em poucas palavras o que vc quer, por gentileza

#3

Acho que vc está complicando a busca do pedido pelo ID. recomendo que vc crie funções para cada tarefa que precisa ser executada.

Apesar que, concordando com o colega @rodriguesabner, sua dúvida ficou um pouco confusa.

Fiz um código aqui que faz a busca no array pelo pedido usando o id e imprime o sku de cada produto.

chamei o array de pedidos de pedidos (chamar de arrei não ia ficar muito legal =D )

function findPedidoById(id) {
	return pedidos.find(item => item.Pedido === id);
}

function imprimirProdutos(pedido) {
	for (let produto of pedido.Produtos) {
		console.log(produto.sku);
	}
}

// retorna o objeto referente ao pedido do id informado
let pedido = findPedidoById(5643238);

// imprime no console do navegador
console.log(pedido);

// chama uma função que imprime no console o sku de cada produto.
imprimirProdutos(pedido);
1 curtida
#4

@Lucas_Camara @rodriguesabner

Bem, assim:

então vamos olhar só para arquivo JSON, que é a referência. Ele é um array, e cada objeto desse array tem 3 atributos: pedido, nome cliente e Produtos.

O objeto Produtos também é um array (então tem o array principal e dentro de cada objeto Pedido tem um array de Produtos com outros três objetos.

Eu já consigo com um for SIMPLES for (i = 0; i < menor.tamanhoArrayPrincipal, i++) ler TODOS OS PEDIDOS. Depois que eu encontro o pedido que preciso eu tenho de LISTAR os objetos dentro do Array Produtos (tem atributos sku, valor unitario e quantidade). Passar pelo array principal em busca do pedido eu consigo.

O QUE EU QUERO/PRECISO:

depois que eu achei o pedido, preciso fazer um outro laço dentro do Produtos para listá-los (tem Produto que tem 3 objetos, outros 2 e até nenhum). E preciso fazer um outro for (for (i = 0; i < menor.tamanhoArrayProdutos, i++) para listar item a item na tela.

Eu sei que tem vários modos de fazer isso (com forEach por exemplo, ou com for produto in Produtos, também) mas no meu caso precisa ser com esse tipo de for (mais antigo vamos dizer assim e mesmo sendo menos eficiente). E é isso que eu não estou conseguindo.

Dentro do array Produtos (que esta dentro do Array principal do JSON) ler cada item do Produto, referente ao pedido informado antes, é isso, tipo um for dentro do outro.

Já tentei de tudo e ainda não consegui listar. Depois vou precisar colocar dentro de um array do Javascritp para então converter para JSON (com stringfy) e por fim salvar num outro JSON de saida SÓ O NUMERO DO PEDIDO COM SEUS PRODUTOS.

O desafio para mim e acessar esses objetos dentro do Array Produtos. Se faltou alguma coisa me avisa por favor e obrigado pela ajuda.

O que preciso é isso de usar um for desse padrão acima (for (i = 0; i < menor.tamanhoArrayProdutos; i++)).

#6

blz

#7

Bom dia @rickzale! Não precisa duplicar a resposta. Estou apagando a segunda e aí qualquer coisa vc edita a primeira.

Vou editar a primeira pra ficar de acordo com a informação adicional que vc colocou tambem.

1 curtida
#8

tá certo. Obrigado.

#9

Você quase acertou. Só que em vez de pegar o Produtos de obj, bastava pegar de dados[i]:

for (var i = 0; i < dados.length; i++) {
    if (dados[i].Pedido == pedido) {
        document.write("Pedido selecionado: " + dados[i].Pedido);

        for (var j = 0; j < dados[i].Produtos.length; j++) {
            var produto = dados[i].Produtos[j];
            document.write(produto); // produto (com sku, quantidade e preco_unitario)
        }
    }
}

Para entender melhor, basta entender como é a sintaxe de um JSON.

Você tem um array (está delimitado por [ ]). Cada elemento desse array é um objeto (está delimitado por { }). Um objeto é um conjunto de pares “chave: valor”. Por exemplo, neste objeto:

{
  "Pedido":5643234,
  "nome_cliente":"Adeilson Denaison Dorevato",
  "Produtos":[
     {
        "sku":"COR-4325",
        "quantidade":3,
        "preco_unitario":124
     },
     {
        "sku":"COR-1000",
        "quantidade":1,
        "preco_unitario":199.99
     }
  ]
}

Ele tem 3 chaves:

  • “Pedido”, cujo valor é um número
  • “nome_cliente”, cujo valor é uma string (está entre aspas)
  • “Produtos”, cujo valor é um array (está entre [ ]). E dentro desse array temos outros objetos (estão entre { })

Para entender melhor:


dados = [  <-- início do array
    {  <-- Início do objeto (primeiro elemento do array dados)
      "Pedido":5643234,  <-- chave "Pedido", valor 5643234
      "nome_cliente":"Adeilson Denaison Dorevato",  <-- chave "nome_cliente", valor "Adeilson Denaison Dorevato"
      "Produtos":[  <-- chave "Produtos", valor é um array (começa aqui no "[")
         {  <-- primeiro elemento do array "Produtos" (é um objeto, pois está entre "{ }")
            "sku":"COR-4325",
            "quantidade":3,
            "preco_unitario":124
         },  <-- fim do primeiro elemento
         {  <-- segundo elemento do array "Produtos" (é um objeto, pois está entre "{ }")
            "sku":"COR-1000",
            "quantidade":1,
            "preco_unitario":199.99
         }  <-- fim do segundo elemento
      ]  <-- fim do array "Produtos" 
    },  <-- fim do objeto
    {  <-- Início de outro objeto (segundo elemento do array dados)
       etc... (o objeto tem seu Pedido, nome_cliente e array Produtos)
    },  <-- fim do objeto
    etc... (outros objetos do array dados)
]  <-- fim do array dados

Ou seja, no for mais externo, a cada iteração dados[i] aponta para um dos objetos do array dados. Ao fazer obj = dados[i].Pedido, a variável obj contém o número do pedido, por isso não faz sentido tentar pegar a chave “Produtos” dele. Este array está na verdade em dados[i].Produtos.

Dito isso, não vejo porque não poderia usar for..of, já que funciona do mesmo jeito:

for (var dado of dados) {
    if (dado.Pedido == pedido) {
        document.write("Pedido selecionado: " + dado.Pedido);
        for (var produto of dado.Produtos) {
            document.write(produto); // produto (com sku, quantidade e preco_unitario)
        }
    }
}
#10

Cara muito obrigado. Agora ele esta lendo todos os produtos e consigo acesso. Só uma coisa: como mostrar (listar) APENAS OS PRODUTOS do PEDIDO SELECIONADO? Tenho de arrumar o if que está debaixo do 1º for? Como ler SÓ OS PRODUTOS DO PEDIDO específico?
Mesmo assim obrigado. Já consegui com sua ajuda “destravar”.

#11

O código que eu sugeri já faz isso…:man_shrugging: