Как правильно вывести содержимое json по ключу?

Question

[Петр]

Доброй ночи. Подскажите пожалуйста, как мне правильно вывести содержимое JSON на основании ключа, который хранится в LocalStorage.
API возвращает мне такого вида JSON

let goods = [
    {
       "id":"1",
       "name":"Pizza",
       "cost":3
    },
    {
       "id":"2",
       "name":"Cola",
       "cost":5
    },
    {
       "id":"3",
       "name":"Tomatoes",
       "cost":6
    }]

В LocalStorage я сохранил id товара и его количество.
{1: 3, 2: 2, 3: 1}
Ключем является id а значение это количество товара.
Написал два метода, один добавляет в LocalStorage id и количество, второй считывает из LocalStorage.

function addToCart(id) {
    if (cart[id]!=undefined) {
        cart[id]++;
    }
    else {
        cart[id] = 1;
    }
    localStorage.setItem('cart', JSON.stringify(cart) );
}

function getCartFromLS() {
    return JSON.parse(localStorage.getItem('cart'));
}

Дальше пробую вытащить по полученому id из LocalStorage информацию по товару

let cart = getCartFromLS();

    for(let key in cart){
        console.log(goods[key].name);
    }

Получаю вывод на консоль.
Cola
Tomatoes
Uncaught TypeError: Cannot read property 'name' of undefined
Выводит только два объекта на третий ругается. И не совпадают по id.
Как правильно сформировать вывод? Что бы выводило по id из LocalStorage?

Answer 1

[Rsa97]

В JS индексы массивов начинаются с нуля, вы пытаетесь обратиться к goods[3], которого не существует.

Comments

[Петр]

Уже дошло, когда отладку посмотрел:). Но как выйти из ситуации?

[Rsa97]

Самое простое - переформировать массив товаров, привести его к виду

{ 1: { id: 1, name: 'Pizza', cost: 3}, 2: { ... }, 3: { ... } }

Можно так:

const goodsObj = {}
goods.forEach(el => { goodsObj[el.id] = el })
// {
// ​  1:  { id: "1", name: "Pizza", cost: 3 }
​//   2:  { id: "2", name: "Cola", cost: 5 }
//   ​3:  { id: "3", name: "Tomatoes", cost: 6 }
// }

Тем более, что id могут идти не по порядку, например вам придёт id 1, 2, 3, 5, 10.

[Евгений]

Петр, м.б. банальное console.log(goods[key-1].name);

[Петр]

Евгений, Rsa97, Спасибо.

Answer 2

[AlexCraft]

Попробуйте так:

console.log(
  goods.map((good) => `Товар ${good.id}: ${good.name}, цена: ${good.cost} $`)
)

А ещё можно произвести деструктуризацию объекта и тогда получится вот так:

console.log(
  goods.map(({ id, name, cost }) => `Товар ${id}: ${name}, цена: ${cost} $`)
)

Comments

[Петр]

Спасибо попробую.