Usando un array de objetos JSON en JavaScript
- Crear un array de objetos JSON
- Acceder a un objeto desde un array de objetos JSON
- Iterando sobre un array de objetos JSON
- Agregar un objeto a el array de objetos JSON
- Eliminar un objeto de un array de objetos JSON
- Busque un elemento del array de objetos JSON
Un objeto JSON es un objeto JavaScript simple. Podemos crear un array con muchos objetos JSON similares. A diferencia de los lenguajes como C, C++, Java, etc., en javascript, es fácil manejar el array de objetos JSON. Es comparable a una estructura Array en C o un array de un objeto de clase en Java. En este artículo, discutiremos cómo crear un array de objetos JSON directamente mediante la iteración y la búsqueda de un elemento en ella.
Crear un array de objetos JSON
Podemos crear un array de objetos JSON asignando un array JSON a una variable o agregando valores dinámicamente en un array de objetos usando el operador .push() o agregando un objeto en un índice del array usando construcciones de bucle como el Bucle for o bucle while. Consulte el siguiente código para comprender mejor.
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));
Producción :
[{"id":1,"name":"January"},{"id":2,"name":"February"}]
[{"id":1,"name":"January"},{"id":2,"name":"February"}]
En el código anterior, la variable months contiene el array de objetos JSON asignados explícitamente, mientras que monthsArray es un array de objetos JSON creados mediante la asignación de valores dentro de un bucle for. Usamos la función de array .push() para agregar el objeto javascript generado al final de monthsArray. Tenga en cuenta que ambas matrices muestran la misma estructura cuando se registran con la declaración console.log() de JavaScript. La función JSON.stringify() convierte el array JSON a un formato de cadena para hacerlo en un formato legible por humanos.
Acceder a un objeto desde un array de objetos JSON
Hemos creado un array de objetos JSON. Veamos cómo podemos acceder a un elemento de esta matriz. El enfoque es el mismo que hacemos para un array de cadenas simple o un array de números. Podemos acceder a un objeto de array utilizando el índice de array (que comienza desde 0) y manipular el valor del objeto en ese índice. Consulte el siguiente código.
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);
Producción :
1
January
3
March
En el código, cambiamos el valor de los parámetros del objeto accediendo al primer índice del array meses usando el índice de array. De manera similar, podemos cambiar el valor de cualquier otro objeto del array usando su índice.
Iterando sobre un array de objetos JSON
Podemos iterar el array de objetos de la misma manera que lo hacemos para un array de cadenas o un array de números. Podemos usar un bucle for o un bucle while para nuestro propósito. Podemos acceder a los elementos usando los índices de array. Iteramos el array desde el índice 0 hasta la longitud del array. El atributo .length también devuelve la longitud del array de objetos. Consulte el siguiente código que muestra la iteración del array y el valor de impresión de cada objeto que contiene.
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}`)
}
Producción :
0 id:1, name:January
1 id:2, name:February
Agregar un objeto a el array de objetos JSON
Hemos creado un array de objetos y los hemos iterado. Veamos ahora cómo agregar elementos a el array JSON. Podemos usar la función .push() para agregar un objeto JSON al final del array. La función .unshift() agrega un elemento al comienzo de un array JSON. El .splice() inserta un objeto en un índice especificado en un array. Consulte el siguiente código que describe el uso de cada una de estas funciones.
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));
Producción :
[{"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"}]
Tenga en cuenta que podemos usar la función .splice() para reemplazar objetos de un array con valores más nuevos pasados como parámetros. El primer parámetro del método .splice() es el índice en el que realizamos las operaciones. Como segundo parámetro, mencionamos la cantidad de elementos que deseamos reemplazar. El parámetro final es el valor que insertamos en el array.
Eliminar un objeto de un array de objetos JSON
Podemos eliminar elementos de un array de objetos de una manera similar a la de los arrays de JavaScript simples. Podemos usar el método .pop() de javascript para eliminar el elemento del final del array de objetos JSON. El .shift() elimina un objeto del principio del array de objetos JSON. La función .splice() elimina un elemento en un índice especificado del array JSON. Consulte el siguiente código.
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));
Producción :
[{"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"}]
Busque un elemento del array de objetos JSON
Podemos usar .indexOf() o includes() para verificar si un elemento está presente en un array de cadena simple. Pero estos métodos no funcionarán para una variedad de objetos. Podemos usar ciertas funciones similares como .filter(), .find(), findIndex() para comprobar si un elemento está presente en el array. Podemos iterar manualmente el array y verificar si el elemento existe usando construcciones de bucle (como bucles for, while, etc.), pero esa puede ser la última opción a considerar, ya que conducirá a un código voluminoso. Las funciones incorporadas en javascript como .filter(), .find(), findIndex() son útiles para buscar objetos en un array de objetos JSON. La función .filter() devuelve un array que contiene los objetos que satisfacen una determinada condición, .find() devuelve el objeto que satisface la condición pasada como una función en línea, findIndex() devolverá el índice del objeto si puede encontrarlo en el array, de lo contrario, devuelve -1. Por lo tanto, al conocer el tipo de retorno de las funciones, podemos diseñar la funcionalidad de búsqueda en un array de objetos JSON. Consulte el siguiente código para comprender mejor los 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');
Producción :
April month found
January month found
April month found