Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Como buscar um objeto dentro de um outro objeto no JSON

Pessoal, tudo bom?

Para praticar os conhecimentos adquiridos aqui no curso estou desenvolvendo alguns projetinhos à parte. Em um deles, peguei um exemplo de JSON, que salvei para utilização aqui: https://api.myjson.com/bins/6fuvk

Assim como feito em aula criei a classe HttpService:

class HttpService {
    get(url){
        return new Promise((resolve, reject) => {
            let xhr = new XMLHttpRequest();
                /* configurações */
                xhr.open("GET", url);
                xhr.send();
                xhr.onreadystatechange = () => {
                    if(xhr.readyState == 4){
                        if(xhr.status == 200){
                            resolve(
                                JSON.parse(xhr.responseText)
                            );
                        }
                        else{
                            reject(xhr.responseText);
                        }
                    }
                }
        });
    }

    post(url, dado){
        return new Promise((resolve, reject) => {
            let xhr = new XMLHttpRequest();
            xhr.open("POST", url, true)
        });
    }
}

E também a classe de importação:

class Import{

    constructor(){
        this._http = new HttpService();
    }

    obterArraysAlunos(){
        return new Promise((resolve, reject) => {
            this._http
                .get("https://api.myjson.com/bins/1fikbc")
                .then(listAlunos=> {
                    resolve(Object.keys(listAlunos).map(i => listAlunos[i]))})
                .catch(erro => {
                    console.log(erro);
                    reject("Não foi possível carregar as informações dos alunos");
                });
        });
    }
}

A ideia era criar duas arrays separadas, uma com os alunos do primeiro semestre e uma com os alunos do segundo semestre para tratar cada uma das arrays de forma separada. Porém recebo uma única array e dentro da posição 0 dois objetos referentes, aí sim, aos alunos do primeiro e segundo semestre.

Minha dúvida é, como acessar esses objetos na hora da importação para que o retorno da Promise seja duas arrays distintas, e não uma. Como acessar um objeto dentro de um outro objeto?

Alguém consegue me ajudar? :) Obrigada!

2 respostas
solução!

Olá Livia, Tudo bem?

Olhando o seu JSON notei que você tem uma estrutura que na raiz possui dois objetos, cada um com uma array, como podemos ver abaixo.

{
   "listAlunos":{
      "alunosPrimeiroSemestre":[
         {
            "id":"aluno1",
            "info":{
               "nome":"Paulo",
               "nascimento":"05/08/1990",
               "curso":"javascript"
            }
         },
         {
            "id":"aluno2",
            "info":{
               "nome":"Fernada",
               "nascimento":"08/09/1991",
               "curso":"html"
            }
         }
      ],
      "alunosSegundoSemestre":[
         {
            "id":"aluno3",
            "info":{
               "nome":"João",
               "nascimento":"12/05/1978",
               "curso":"javascript"
            }
         },
         {
            "id":"aluno4",
            "info":{
               "nome":"Maria",
               "nascimento":"15/01/1985",
               "curso":"html"
            }
         }
      ]
   }
}

Uma opção seria tentar converter seus objetos para array, na configuração atual temos:

Raiz:
-> listAlunos:
   -> alunosPrimeiroSemestre
   -> alunosSegundoSemestre

Neste caso o que podemos fazer é um map para cada propriedade do list alunos e converter eles em um array.

Na classe import podemos reescreve-la da seguinte forma:

class Import{

    constructor(){
        this._http = new HttpService();
    }

    obterArraysAlunos(){
        return new Promise((resolve, reject) => {
            this._http
                .get("https://api.myjson.com/bins/1fikbc")
                .then(raiz=> {
                    resolve(Object.keys(raiz.listAlunos).map(relacaoAlunos => raiz.listAlunos[relacaoAlunos]))})
                .catch(erro => {
                    console.log(erro);
                    reject("Não foi possível carregar as informações dos alunos");
                });
        });
    }
}

Eu basicamente reescrevi a linha resolve(Object.keys(raiz.listAlunos).map(relacaoAlunos => raiz.listAlunos[relacaoAlunos]))})porque o listAlunos não é a raiz do seu objeto, mas sim a única propriedade do objeto raiz.

Uma outra forma seria reescrever o seu JSON da seguinte forma:

{
   "alunosPrimeiroSemestre":[
      {
         "id":"aluno1",
         "info":{
            "nome":"Paulo",
            "nascimento":"05/08/1990",
            "curso":"javascript"
         }
      },
      {
         "id":"aluno2",
         "info":{
            "nome":"Fernada",
            "nascimento":"08/09/1991",
            "curso":"html"
         }
      }
   ],
   "alunosSegundoSemestre":[
      {
         "id":"aluno3",
         "info":{
            "nome":"João",
            "nascimento":"12/05/1978",
            "curso":"javascript"
         }
      },
      {
         "id":"aluno4",
         "info":{
            "nome":"Maria",
            "nascimento":"15/01/1985",
            "curso":"html"
         }
      }
   ]
}

Neste caso o seu código funcionaria direto, sem precisar de alterações.

Entendo que seja para estudo, mas no mundo real talvez fosse mais interessante colocar o semestre como propriedade do aluno, você poderia usar o reducepara transformar a array de alunos em arrays separadas por semestres.

Espero ter te ajudado.

Oi Rafael, tudo bom? Obrigada pela resposta, funcionou perfeitamente. Utilizei a primeira forma por que a ideia era realmente eu não mexer no JSON e deu tudo certo :)

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software