Usando matriz de objetos JSON em JavaScript
- Criação de um array de objetos JSON
- Acessando um objeto a partir de um array de objetos JSON
- Iterando sobre um array de objetos JSON
- Adicionar um objeto à matriz de objetos JSON
- Remover um objeto de um array de objetos JSON
- Procure um elemento do array de objetos JSON
Um objeto JSON é um objeto JavaScript simples. Podemos criar um array com muitos objetos JSON semelhantes. Ao contrário de linguagens como C, C++, Java, etc., em javascript, é fácil lidar com array de objetos JSON. É comparável a uma estrutura Array em C ou a um array de um objeto de classe em Java. Neste artigo, discutiremos como criar um array de objetos JSON por meio da iteração e localização de um elemento nela.
Criação de um array de objetos JSON
Podemos criar um array de objeto JSON atribuindo um array JSON a uma variável ou adicionando dinamicamente valores em um array de objeto usando o operador .push() ou adicionar um objeto em um índice do array usando construções de loop como o Loop for ou loop while. Consulte o código a seguir para entender melhor.
var months = [{'id': 1, 'name': 'January'}, {'id': 2, 'name': 'February'}];
console.log(JSON.stringify(months));
var monthNames = ['January', 'February'];
var month = {};
var monthsArray = [];
for (let i = 0; i < 2; i++) {
month.id = (i + 1);
month.name = monthNames[i];
monthsArray.push({...month});
}
console.log(JSON.stringify(monthsArray));
Produção:
[{"id":1,"name":"January"},{"id":2,"name":"February"}]
[{"id":1,"name":"January"},{"id":2,"name":"February"}]
No código acima, a variável months contém o array de objetos JSON atribuídos explicitamente, enquanto o monthsArray é um array de objetos JSON criados pela atribuição de valores dentro de um loop for. Usamos a função de array .push() para adicionar o objeto javascript gerado ao final do monthsArray. Observe que ambas as matrizes exibem a mesma estrutura quando registradas com a instrução JavaScript console.log(). A função JSON.stringify() converte a matriz JSON em um formato de string para torná-la em um formato legível por humanos.
Acessando um objeto a partir de um array de objetos JSON
Criamos um array de objetos JSON. Vamos ver como podemos acessar um elemento deste array. A abordagem é a mesma que fazemos para um array de string simples ou um array de número. Podemos acessar um objeto de array usando o índice de array (que começa em 0) e manipular o valor do objeto nesse índice. Consulte o código a seguir.
var months = [{'id': 1, 'name': 'January'}, {'id': 2, 'name': 'February'}];
console.log(months[0].id);
console.log(months[0].name);
months[0].id = 3;
months[0].name = 'March';
console.log(months[0].id);
console.log(months[0].name);
Produção:
1
January
3
March
No código, mudamos o valor dos parâmetros do objeto acessando o primeiro índice do array months usando o índice do array. Da mesma forma, podemos alterar o valor de qualquer outro objeto do array usando seu índice.
Iterando sobre um array de objetos JSON
Podemos iterar o array de objetos da mesma maneira que fazemos para um array de string ou um array de número. Podemos usar um loop for ou um loop while para o nosso propósito. Podemos acessar os elementos usando os índices do array. Nós iteramos a matriz do 0º índice até o comprimento do array. O atributo .length retorna o .length do array de objetos também. Consulte o código a seguir que mostra a iteração do array e o valor de impressão de cada objeto nele.
var months = [{'id': 1, 'name': 'January'}, {'id': 2, 'name': 'February'}];
for (let i = 0; i < months.length; i++) {
console.log(`${i} id:${months[i].id}, name:${months[i].name}`)
}
Produção:
0 id:1, name:January
1 id:2, name:February
Adicionar um objeto à matriz de objetos JSON
Criamos uma série de objetos e iteramos sobre eles. Vejamos agora como adicionar elementos ao array JSON. Podemos usar a função .push() para adicionar um objeto JSON ao final do array. A função .unshift() adiciona um elemento no início de um array JSON. O .splice() insere um objeto em um índice especificado em um array. Consulte o código a seguir que descreve o uso de cada uma dessas funções.
var months = [{'id': 1, 'name': 'January'}, {'id': 2, 'name': 'February'}];
months.push({'id': 4, 'name': 'April'});
console.log(JSON.stringify(months));
months.unshift({'id': 12, 'name': 'December'})
console.log(JSON.stringify(months));
months.splice(3, 0, {'id': 3, 'name': 'March'});
console.log(JSON.stringify(months));
Produção:
[{"id":1,"name":"January"},{"id":2,"name":"February"},{"id":4,"name":"April"}]
[{"id":12,"name":"December"},{"id":1,"name":"January"},{"id":2,"name":"February"},{"id":4,"name":"April"}]
[{"id":12,"name":"December"},{"id":1,"name":"January"},{"id":2,"name":"February"},{"id":3,"name":"March"},{"id":4,"name":"April"}]
Observe, podemos usar a função .splice() para substituir objetos de um array por valores mais novos passados como parâmetros. O primeiro parâmetro do método .splice() é o índice no qual executamos as operações. Como segundo parâmetro, mencionamos o número de elementos que desejamos substituir. O parâmetro final é o valor que inserimos na matriz.
Remover um objeto de um array de objetos JSON
Podemos remover elementos de um array de objeto de maneira semelhante à de arrayes JavaScript simples. Podemos usar o método .pop() de javascript para remover o elemento do final do array de objetos JSON. O .shift() remove um objeto do início do array de objetos JSON. A função .splice() remove um elemento em um índice especificado do array JSON. Consulte o código a seguir.
var months = [
{'id': 12, 'name': 'December'}, {'id': 1, 'name': 'January'},
{'id': 2, 'name': 'February'}, {'id': 3, 'name': 'March'},
{'id': 4, 'name': 'April'}
];
months.shift();
console.log(JSON.stringify(months));
months.pop();
console.log(JSON.stringify(months));
months.splice(1, 1);
console.log(JSON.stringify(months));
Produção:
[{"id":1,"name":"January"},{"id":2,"name":"February"},{"id":3,"name":"March"},{"id":4,"name":"April"}]
[{"id":1,"name":"January"},{"id":2,"name":"February"},{"id":3,"name":"March"}]
[{"id":1,"name":"January"},{"id":3,"name":"March"}]
Procure um elemento do array de objetos JSON
Podemos usar .indexOf() ou includes() para verificar se um elemento está presente em um array de string simples. Mas esses métodos não funcionarão para uma série de objetos. Podemos usar certas funções semelhantes como .filter(), .find(), findIndex() para verificar se um elemento está presente no array. Podemos iterar manualmente a matriz e verificar se o elemento existe usando construções de loop (como for, while loops etc.), mas essa pode ser a última opção a ser considerada, pois levará a um código volumoso. As funções javascript embutidas como .filter(), .find(), findIndex() são úteis para pesquisar objetos em um array de objetos JSON. A função .filter() retorna um array contendo os objetos que satisfazem uma determinada condição, .find() retorna o objeto que satisfaz a condição passada como uma função embutida para ele, findIndex() retornará o índice do objeto se ele puder encontrá-lo na matriz, caso contrário, ele retornará -1. Conseqüentemente, conhecendo o tipo de retorno das funções, podemos projetar a funcionalidade de pesquisa em um array de objetos JSON. Consulte o código a seguir para entender melhor os usos de .filter(), .find(), findIndex().
var months = [
{'id': 12, 'name': 'December'}, {'id': 1, 'name': 'January'},
{'id': 2, 'name': 'February'}, {'id': 3, 'name': 'March'},
{'id': 4, 'name': 'April'}
];
(months.filter(i => i.name === 'April').length) ?
console.log('April month found') :
console.log('Not found');
(months.find(i => i.name === 'January') != {}) ?
console.log('January month found') :
console.log('Not found');
(months.findIndex(i => i.name === 'April') > -1) ?
console.log('April month found') :
console.log('Not found');
Produção:
April month found
January month found
April month found