Accessing multiple keys within an array by ID

Question

I have an array like this:

let productsArray = [
    { name: 'Mandala - horgolt dekoráció', id: '148332', price: '3000', src: '200913183702_148332.jpeg', motto: 'Tipp: tedd egyedivé saját díszítéssel!'},
    { name: 'Nyulak fatörzsben', id: '971487', price: '5800', src: '200526104718_971487.jpeg', motto: 'Legyen vidám napod!' },
    { name: 'Filc díszek', id: '761519', price: '2800', src: '161029211220_761519.jpeg', motto: 'Legyen szép a karácsonyod!',}
];
console.log(productsArray);

If I get the ID from a button, how can I access the other keys within the array? For example, I know the ID=148332, so I need the price and the name. I need this without back-end if possible.

Thank you,

Use [`Array.prototype.find`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/find) — Kunal Mukherjee, Oct 15 '20 at 16:12
Does this answer your question? [Find object by id in an array of JavaScript objects](https://stackoverflow.com/questions/7364150/find-object-by-id-in-an-array-of-javascript-objects) — Heretic Monkey, Oct 15 '20 at 16:16

score 0 · Answer 1 · answered Oct 15 '20 at 16:17

To do this in an optimized way, you'll want to have a data structure with the id's mapped to the objects. This will reduce lookup time significantly, since you know what record you want and you don't need to parse all of the records.

Build the new data structure like this...

let productsArray = [
    { name: 'Mandala - horgolt dekoráció', id: '148332', price: '3000', src: '200913183702_148332.jpeg', motto: 'Tipp: tedd egyedivé saját díszítéssel!'},
    { name: 'Nyulak fatörzsben', id: '971487', price: '5800', src: '200526104718_971487.jpeg', motto: 'Legyen vidám napod!' },
    { name: 'Filc díszek', id: '761519', price: '2800', src: '161029211220_761519.jpeg', motto: 'Legyen szép a karácsonyod!',}
];

const productsHash = [];
productsArray.forEach((product) => {productsHash[product.id] = product;});

console.log("What is the data for id 761519?");
console.log(productsHash[761519]);

And then access a part of the data structure simply with productsHash[761519], or, in terms of your application, maybe something like productsHash[someuservalue].

score 0 · Accepted Answer · answered Oct 15 '20 at 16:20

To elaborate on Kunal's comment, you can use Array.prototype.find in the following way:

let productsArray = [
    { name: 'Mandala - horgolt dekoráció', id: '148332', price: '3000', src: '200913183702_148332.jpeg', motto: 'Tipp: tedd egyedivé saját díszítéssel!'},
    { name: 'Nyulak fatörzsben', id: '971487', price: '5800', src: '200526104718_971487.jpeg', motto: 'Legyen vidám napod!' },
    { name: 'Filc díszek', id: '761519', price: '2800', src: '161029211220_761519.jpeg', motto: 'Legyen szép a karácsonyod!',}
];

const idFromButton = '148332'; //assuming you got this value from the button id
const foundProduct = productsArray.find((el) => el.id === idFromButton);

console.log(foundProduct);

score 0 · Answer 3 · answered Oct 15 '20 at 16:26

you can use findIndex method in order to find the index of that object if you want to edit it or use find method if you just want the value.

find example

let productsArray = [
    { name: 'Mandala - horgolt dekoráció', id: '148332', price: '3000', src: '200913183702_148332.jpeg', motto: 'Tipp: tedd egyedivé saját díszítéssel!'},
    { name: 'Nyulak fatörzsben', id: '971487', price: '5800', src: '200526104718_971487.jpeg', motto: 'Legyen vidám napod!' },
    { name: 'Filc díszek', id: '761519', price: '2800', src: '161029211220_761519.jpeg', motto: 'Legyen szép a karácsonyod!',}
];

const id = '148332';
console.log(productsArray.find(item => item.id == id));

findIndex example

let productsArray = [
    { name: 'Mandala - horgolt dekoráció', id: '148332', price: '3000', src: '200913183702_148332.jpeg', motto: 'Tipp: tedd egyedivé saját díszítéssel!'},
    { name: 'Nyulak fatörzsben', id: '971487', price: '5800', src: '200526104718_971487.jpeg', motto: 'Legyen vidám napod!' },
    { name: 'Filc díszek', id: '761519', price: '2800', src: '161029211220_761519.jpeg', motto: 'Legyen szép a karácsonyod!',}
];

const id = '148332';
const getObjectIndexInProductsArray = (id) => productsArray.findIndex(element => element.id === id);
console.log(productsArray[getObjectIndexInProductsArray(id));

the last example will give you the index of the object so you'll be able to change this place in the array

score -1 · Answer 4 · answered Oct 15 '20 at 16:18

You can use find.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find

let productsArray = [
    { name: 'Mandala - horgolt dekoráció', id: '148332', price: '3000', src: '200913183702_148332.jpeg', motto: 'Tipp: tedd egyedivé saját díszítéssel!'},
    { name: 'Nyulak fatörzsben', id: '971487', price: '5800', src: '200526104718_971487.jpeg', motto: 'Legyen vidám napod!' },
    { name: 'Filc díszek', id: '761519', price: '2800', src: '161029211220_761519.jpeg', motto: 'Legyen szép a karácsonyod!',}
];

const output = productsArray.find(({id})=>{ return id === '148332' });
console.log(output);

function findElementById(arr,_id){
  return arr.find(({id}) => { return id === _id}); 
}

console.log(findElementById(productsArray, '148332'));
console.log(findElementById(productsArray, '971487'));

Accessing multiple keys within an array by ID

4 Answers4

find example

findIndex example