2

Como bien el título lo dice, busco editar un JSON que se encuentra dentro de un Array con "N" cantidad elementos, pero busco realizarlo a través de una función la cual recibirá el id del valor a editar, y busco que sea de la manera más sencilla posible evitando usar un foreach.
Estoy realizando una app en Nativescript con Angular.

var data = [
  {id:1, nombre:"nombre1", editable:true},
  {id:2, nombre:"nombre2", editable: false},
  {id:3, nombre:"nombre3", editable: false},
  {id:4, nombre:"nombre4", editable: false},
  {id:5, nombre:"nombre5", editable: false}
]

Por ello me he planteado:

  • Usar la propiedad filter() para buscar por el id a editar.
  • Usar el indexOf() para obtener el indice de ese valor obtenido.
  • Usar la propiedad splice() para generar la edición

Ejemplo:

Cambiar el estado del id:2 de editable: false a editable: true

Se que suena sencillo, pero no termino de visualizar como ejecutar este código ya que no logro obtener el ìndexOf del valor filtrado. Si pueden ayudarme a diseñar esta función, se los agradeceré enormemente.

2
  • 2
    ¿Por qué no usas directamente .find()? const encontrado = data.find(i => i.id === 2) y una vez q lo tienes: encontrado.editable = true Commented el 14 ago. 2019 a las 7:23
  • 1
    JSON no es Objeto Commented el 14 ago. 2019 a las 15:13

4 respuestas 4

6

Si solo hay un elemento con el ID que buscas, mejor usar la función find() en lugar de filter().

find() te devuelve el primer elemento que encaje con lo que le digas, pero filter() te busca todas y te devuelve un array con esos. Por lo tanto, find() será más eficiente porque parará cuando encuentre el elemento (si no lo encuentra devuelve undefined), filter siempre acabará recorriendo todo el array.

Ejemplo con find():

var data = [
  {id:1, nombre: "nombre1", editable: true},
  {id:2, nombre: "nombre2", editable: false},
  {id:3, nombre: "nombre3", editable: false}
]

var elementoAEditar = data.find(elemento => elemento.id === 2);

// Para asegurar que encuentra el elemento, ponemos este if. Si no lo encuentra no entrará en el if.
if (elementoAEditar) {
    elementoAEditar.editable = true;
}

// Ahora data[1].editable (el de ID 2) será igual a true.
console.log(data);

3

puedes usar la función findIndex() de JavaScript. Te dejo un codigo a continucación para ver si es lo que necesitas:

var data = [{id:1, nombre:"nombre1", editable:true},
{id:2, nombre:"nombre2", editable: false},
{id:3, nombre:"nombre3", editable: false},
{id:4, nombre:"nombre4", editable: false},
{id:5, nombre:"nombre5", editable: false}]

var index = data.findIndex(data => data.id==2);

console.log(index);

data[index].editable = true;

console.log(data);

2

Puede ser algo asi:

var data = [
  {id:1, nombre:"nombre1", editable:true},
  {id:2, nombre:"nombre2", editable: false},
  {id:3, nombre:"nombre3", editable: false},
  {id:4, nombre:"nombre4", editable: false},
  {id:5, nombre:"nombre5", editable: false}
]

 data.find( d => d.id == 2 ).editable = true

console.log(data)

Este código esta simplificado. Si quieres comprobar que de verdad exista el elemento podrías usar algo así:

var data = [
  {id:1, nombre:"nombre1", editable:true},
  {id:2, nombre:"nombre2", editable: false},
  {id:3, nombre:"nombre3", editable: false},
  {id:4, nombre:"nombre4", editable: false},
  {id:5, nombre:"nombre5", editable: false}
]

 var comprobar = data.find( d => d.id == 2 )

if( comprobar ){ 
  comprobar.editable = true
  console.log(data)
} 
else {
  console.log('No existe el id')
} 
    

1

Todas las funciones que mencionas, y otras que se podrían usar, iteran sobre el array como el foreach o un for. Lo único que mejoraría significativamente la performance es no seguir iterando si encuentra una coincidencia.

Manualmente se lograría haciendo for y break, y en cuanto a las funciones nativas que harían el break: some() retorna true o false si encuentra o no el elemento, pero si necesitas el elemento coincidente lo mejor en mi criterio es usar find() o findIndex(). El primero devuelve el elemento y el segundo el indice. Si necesitas modificar el valor que buscas, lo mejor es usar findIndex().

var data = [
  {id:1, nombre:"nombre1", editable:true},
  {id:2, nombre:"nombre2", editable: false},
  {id:3, nombre:"nombre3", editable: false},
  {id:4, nombre:"nombre4", editable: false},
  {id:5, nombre:"nombre5", editable: false}
];

data[data.findIndex(e=>e.id === 4)].nombre = "nuevo nombre 4";

console.log(data);

Este es solo un ejémplo básico de funcionamiento, porque como bien indica @JackNavaRow en este ejemplo en particular si el inidice no existe va a arrojar error, y si la propiedad nombre no existe, también va a arrojar error. Estoy asumiendo que el indice siempre va a existir y la propiedad también. Si este no fuera el caso, hay que considerar esos recaudos.

2
  • y si el index no existe , te va a dar un error! Commented el 14 ago. 2019 a las 17:30
  • @JackNavaRow si, claro, en este ejemplo tiraría error. Tampoco lo hice dinámico. Estoy asumiendo que los ids existen si o si.
    – Emeeus
    Commented el 14 ago. 2019 a las 17:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.