Как вывести элемент массива у которого id соответствует дата атрибуту кнопки?

Question

[Lukmann]

let breadProduct = [
   {
      "id": 1001,
      "name":"Tasty Bread",
      "price":170,
      "units":"$",
      "description":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      "image":"bread-1.jpg",
      "category":"bread"
   },
   {
      "id": 1002,
      "name":"Диван Forest",
      "price":130.00,
      "units":"$",
      "description":"red",
      "image":"bread-1.jpg",
      "category":"bread"
   },
   {
      "id": 1003,
      "name":"Диван Forest",
      "price":140.00,
      "units":"$",
      "description":"red",
      "image":"bread-1.jpg",
      "category":"bread"
   }
];
$('.watchInfoProduct').on('click',watchAboutProduct);

function watchAboutProduct(){
	let id1 = $(this).attr('product-id');
	for(let i in breadProduct){
        //Что надо делать?
	}
}

Как сделать так чтобы бралось значение из того элемента массива в котором id равен дата атрибуту кнопки?

Comments

[Валерий Воронков]

Во-первых, итерировать массивы через for-in = это далеко не самая длучшая идея. Для масссивов лучше использовать for-of. Во-вторых, это должно быть как-то так:

for(const bread of breadProduct){
  if (bread.id === id1) {
    //делаете то ,что вам нужно
  }
}

Answer 1

[Сергей Соколов]

1. взять id из дата-атрибута: let id = +this.dataset['product-id'] с плюсом, чтобы не строка, а число было - т.к. в массиве где искать id – числа.
   
2. найти элемент: breadProduct.find((el) => el.id === id)
   

Comments

[Lukmann]

спасибо большое

Answer 2

[alvvi]

function watchAboutProduct(){
  let id1 = $(this).attr('product-id');
  let product = breadProduct.find(product => product["id"] === id1);
}

А лучше breadProduct превратить в объект в котором ключи будут id-шниками. Если продуктов ожидается много и искать придется часто. Тогда поиск упростится до breadProduct[id1].

Comments

[Lukmann]

большое спасибо,так и сделаю