0

Tengo un array de objetos o JSON el cual sé filtrar en JavaScript por alguna (una sola) propiedad, el array es así:

var productos = [
    {id: 1, nombreProducto: 'Papas BBQ', precio: 1700},
    {id: 2, nombreProducto: 'Gaseosa x 1', precio: 2500},
    {id: 3, nombreProducto: 'Arroz Libra', precio: 1700},
    {id: 4, nombreProducto: 'Chupeta', precio: 500},
    {id: 5, nombreProducto: 'Postre Y', precio: 5000},
    {id: 6, nombreProducto: 'Carne Libra', precio: 15000},
];

Generalmente lo he filtrado así:

var coincidencias = productos.filter(producto => producto.nombreProducto.includes('G'));

Pero ¿cómo hacerlo con todas o algunas de las propiedades que este JSON contenga? Mi objetivo es crear un campo tipo buscador en donde según lo que el usuario escriba le devuelva las coincidencias del array con todas las propiedades.

1
  • Puedes crear tu mismo una funcion y darselo a filter, Arreglo.filter( (objeto) => FiltrarPropiedades(objeto));
    – Trapss
    el 20 jun. 2022 a las 18:04

2 respuestas 2

2

Pues se puede hacer con un filter y despues con Object.values(objeto) tienes todos los valores del objeto en un array, despues ya luego solo tienes que buscar si alguno incluye tu cadena de búsqueda y listo.

function filtrarProductos(array, searchString){
   const result = array.filter(x => {
        const values = Object.values(x);
        if (values.some(y => y.toString().toLowerCase().includes(searchString.toLowerCase()))){
           return x;
        }
   })
   return result;
}


console.log(filtrarProductos(productos, "500"));

El resultado sería:

[
{
    "id": 2,
    "nombreProducto": "Gaseosa x 1",
    "precio": 2500
},
{
    "id": 4,
    "nombreProducto": "Chupeta",
    "precio": 500
},
{
    "id": 5,
    "nombreProducto": "Postre Y",
    "precio": 5000
},
{
    "id": 6,
    "nombreProducto": "Carne Libra",
    "precio": 15000
}
]
6
  • Si busco los productos con precio "1" me va a traer todos los que tengan un 1 en el precio, y ademas me va a devolver el que tiene id "1", y tambien me devolveria el que se llama "Gaseosa x 1". La funcion deberia recibir otro parametro con la propiedad sobre la que hay que realizar la busqueda para que esto no suceda.
    – Agustin G.
    el 20 jun. 2022 a las 18:48
  • No es evitar que eso suceda. Lo hice como tu pusiste, haberlo explicado mejor
    – Suso
    el 20 jun. 2022 a las 18:50
  • No entiendo, yo que puse?
    – Agustin G.
    el 20 jun. 2022 a las 18:52
  • 1
    Perdona, pensé que eras el que puso la pregunta..... eso me pasa por no revisar bien jejejeej
    – Suso
    el 20 jun. 2022 a las 18:53
  • perdona vos, tenes razon jaja, el usuario pidio exactamente lo que vos hiciste. Ahora veo el ultimo parrafo y lo aclara. Mala mia.
    – Agustin G.
    el 20 jun. 2022 a las 18:59
0

var productos = [
    {id: 1, nombreProducto: 'Papas BBQ', precio: 1700},
    {id: 2, nombreProducto: 'Gaseosa x 1', precio: 2500},
    {id: 3, nombreProducto: 'Arroz Libra', precio: 1700},
    {id: 4, nombreProducto: 'Chupeta', precio: 500},
    {id: 5, nombreProducto: 'Postre Y', precio: 5000},
    {id: 6, nombreProducto: 'Carne Libra', precio: 15000},
];

const buscar = (array,propiedad, query) => {
 const q = query.toString().toLowerCase();
 return array.filter(element => element[propiedad].toString().toLowerCase().includes(query))
}

console.log(buscar(productos, "nombreProducto", "postre"))
console.log(buscar(productos, "id", 3))
console.log(buscar(productos, "precio", 1700))

Podes hacer una función buscar que recibe como argumento un array (donde va a buscar), una propiedad (tiene que ser una cadena de texto con la propiedad sobre la que querés buscar. Podría seleccionarse desde un select) y una query (la cadena o numero que vas a buscar)

Primero, al parámetro query lo transformo en una cadena de texto, ya que la función includes es solo para buscar strings, y si no hago esto no podrías buscar precios o ids. También la convierto en minúsculas. De esta manera es lo mismo buscar "Postre" o "postre".

Luego retorno un filter para acceder a cada elemento, en la propiedad que le pasamos por parámetro (con element[nombreDeLaPropiedad] podes acceder a una propiedad teniendo su nombre en un string, como en este caso, es lo mismo que hacer element.precio, si el parametro recibido fuera "precio". Acá podes leer más al respecto: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors).

Una vez que accede a cada elemento, transforma su valor en string y la paso a minusculas exactamente igual que hago con la query.

Espero te sirva, saludos.

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.