JavaScript JSON para Array: Convertendo dados JSON em arrays
Neste artigo, vamos explorar diferentes maneiras de converter dados JSON em um array em JavaScript.
Publicado em 3 de agosto de 2023
Glossário
Utilizando o método JSON.parse() para converter dados JSON em um array
O método JSON.parse()
O método JSON.parse() é uma forma simples e eficiente de converter dados JSON em um array no JavaScript. Com este método, é possível transformar facilmente uma string JSON em um objeto JavaScript ou em um array, dependendo da estrutura do JSON.
Para converter especificamente em um array, primeiro é necessário garantir que a string JSON esteja corretamente formatada.
Exemplo de utilização do método JSON.parse()
const jsonString = '["maçã", "banana", "laranja"]';
// Convertendo a string JSON em um array
const arrayFrutas = JSON.parse(jsonString);
console.log(arrayFrutas); // Saída: ["maçã", "banana", "laranja"]
No exemplo acima, o método JSON.parse() recebe a string JSON como parâmetro e retorna um objeto JavaScript ou um array, dependendo da estrutura do JSON. No nosso caso, a string JSON representa um array de frutas, e o método retorna um array correspondente.
A vantagem de usar o método JSON.parse() é que ele realiza automaticamente a conversão do JSON para a estrutura de dados adequada no JavaScript. Isso simplifica bastante o processo de transformar dados JSON em formatos utilizáveis no código.
Convertendo dados JSON em um array utilizando loops e arrays vazios em JavaScript
Outra maneira de converter dados JSON em um array em JavaScript é utilizando loops e arrays vazios. Esse método é especialmente útil quando precisamos manipular ou transformar os dados JSON de forma mais personalizada.
Exemplo de utilização de loops e arrays vazios
const jsonData = {
"frutas": ["maçã", "banana", "laranja"],
"legumes": ["cenoura", "batata", "abobrinha"]
};
// Criando um array vazio para armazenar os valores
const arrayDados = [];
// Utilizando um loop para percorrer as chaves do objeto JSON
for (let chave in jsonData) {
// Verificando se a chave contém um array
if (Array.isArray(jsonData[chave])) {
// Adicionando os valores do array à lista de dados
arrayDados.push(...jsonData[chave]);
}
}
console.log(arrayDados); // Saída: ["maçã", "banana", "laranja", "cenoura", "batata", "abobrinha"]
No exemplo acima, temos um objeto JSON com two chaves: “frutas” e “legumes”. Utilizando um loop for..in, verificamos se cada chave contém um array. Se for verdadeiro, adicionamos os elementos desse array ao nosso arrayDados utilizando o método push() e o spread operator (…).
Utilizando a biblioteca lodash para transformar dados JSON em um array em JavaScript
A biblioteca lodash é uma poderosa ferramenta para trabalhar com dados no JavaScript, incluindo a conversão de JSON para arrays. Ela oferece diversas funções utilitárias que facilitam o processamento de dados, tornando o código mais limpo, legível e eficiente.
Exemplo de utilização da biblioteca lodash
const jsonData = {
"frutas": ["maçã", "banana", "laranja"],
"legumes": ["cenoura", "batata", "abobrinha"]
};
// Importando a biblioteca lodash
const _ = require('lodash');
// Convertendo o objeto JSON em um array de valores
const arrayDados = _.values(jsonData);
console.log(arrayDados); // Saída: [["maçã", "banana", "laranja"], ["cenoura", "batata", "abobrinha"]]
No exemplo acima, importamos a biblioteca lodash utilizando o comando require(). Em seguida, utilizamos a função values() para converter o objeto JSON em um array de valores. O resultado é um array que contém os arrays de frutas e legumes.
Trabalhando com o método Object.values() para converter dados JSON em um array em JavaScript
Além da biblioteca lodash, o JavaScript também disponibiliza o método Object.values(), que pode ser utilizado para converter um objeto JSON em um array com os valores do objeto. Esse método é nativo do JavaScript a partir do ECMAScript 2017.
Exemplo de utilização do método Object.values()
const jsonData = {
"frutas": ["maçã", "banana", "laranja"],
"legumes": ["cenoura", "batata", "abobrinha"]
};
// Convertendo o objeto JSON em um array de valores
const arrayDados = Object.values(jsonData);
console.log(arrayDados); // Saída: [["maçã", "banana", "laranja"], ["cenoura", "batata", "abobrinha"]]
No exemplo acima, utilizamos o método Object.values() diretamente no objeto JSON. O resultado é um array que contém os arrays de frutas e legumes, exatamente como no exemplo anterior.
Conclusão
No tutorial acima, exploramos diferentes métodos para converter dados JSON em arrays em JavaScript. O método JSON.parse() fornece uma forma direta e simples de realizar a conversão, bastando fornecer a string JSON como argumento para a função.
Já utilizando loops e arrays vazios ou as bibliotecas lodash e Object.values(), temos a flexibilidade de manipular os dados durante o processo de conversão, permitindo transformar o objeto JSON em um array de forma mais personalizada.
A escolha do método depende da estrutura dos dados JSON e do objetivo da conversão. Ambas as opções são eficazes e oferecem diferentes possibilidades de transformar dados JSON em arrays em JavaScript.
Independente do método escolhido, é importante estar familiarizado com a estrutura do JSON e garantir a formatação correta da string JSON antes de utilizá-la com o JSON.parse().
A Awari é a melhor plataforma para aprender programação no Brasil.
Aqui você encontra cursos com aulas ao vivo, mentorias individuais com os melhores profissionais do mercado e suporte de carreira personalizado para dar seu próximo passo profissional e aprender habilidades como Data Science, Data Analytics, Machine Learning e mais.
Já pensou em aprender de maneira individualizada com profissionais que atuam em empresas como Nubank, Amazon e Google? Clique aqui para se inscrever na Awari e começar a construir agora mesmo o próximo capítulo da sua carreira em dados.
Aprenda uma nova língua na maior escola de idioma do mundo!
Conquiste a fluência no idioma que sempre sonhou com uma solução de ensino completa.
+ 400 mil alunos
Método validado
Aulas
Ao vivo e gravadas
+ 1000 horas
Duração dos cursos
Certificados
Reconhecido pelo mercado
Artigos Relacionados
Confira abaixo mais conteúdos sobre o tema
Curso Técnico Desenvolvedor de Sistemas: Aprenda a criar soluções tecnológicas
Um curso técnico desenvolvedor de sistemas é uma formação...
Curso Desenvolvedor Web em Curitiba: Aprenda a Programar e Construa sua Carreira
Curso Desenvolvedor Web Curitiba: Aprenda a programar, construa uma...
Curso Técnico de Desenvolvedor de Software: Aprenda as habilidades necessárias para se tornar um profissional de sucesso na área de desenvolvimento de software.
Resumo: Descubra os benefícios de fazer um curso técnico...
