JS Вывод элементов объекта через map по определенному условию?

Question

Подскажите, как реализовать универсальный метод который обходил бы объект, но по указаным ключах. Попробую описать на простом примере

const goods = {
        13245345 : {
                name:"Финик",
            rubles: 390,
            hryvnia: 129.09,
        },
        2456 : {
            name:"Изюм",
            rubles: 190,
            hryvnia: 62.89,
        },
        434 : {
            name:"Кешью",
            rubles: 999,
            hryvnia: 330.67,

        },
    };
    
const list = document.querySelector(".goods_list");        


let currency = "";


Object.values(goods).map((el) =>
  list.innerHTML += `<li><p>Имя: ${el.name}</p><p>Цена: ${el.rubles}</p></li>`);


  //// Как сделать из переменной el.rubles универсальную ? Что бы в зависимости от передеваемой переменной .map брал el.rubles а если выполняеться условие то el.hryvnia ?
/// Object.values(goods).map((el) => list.innerHTML += `<li><p>Имя: ${el.name}</p><p>Цена: ${el.currency}</p></li>`);

<ul class="goods_list"></ul>

Answer 1

const goods = {
  13245345: {
    name: "Финик", rubles: 390, hryvnia: 129.09,
  },
  2456: {
    name: "Изюм", rubles: 190, hryvnia: 62.89,
  },
  434: {
    name: "Кешью", rubles: 999, hryvnia: 330.67,
  },
};

function setCurrency(ev) {
  const currency = event.target.value;
  upgradeGoodsList(currency);
}

function upgradeGoodsList(currency = 'rubles') {
  const items = Object.values(goods).map((x) => ({ ...x, price: x[currency] }));
  renderGoodsList(items);
}

function renderGoodsList(items) {
  const list = document.querySelector(".goods_list");
  list.innerHTML = items
    .map((item) => `<li><p>Имя: ${item.name}</p><p>Цена: ${item.price}</p></li>`)
    .join('\n');
}

window.onload = () => upgradeGoodsList();

<select onchange="setCurrency()">
  <option value="rubles">рубль</option>
  <option value="hryvnia">гривна</option>
</select>
<ul class="goods_list"></ul>

Answer 2

Можно например в простую функцию обернуть.

const goods = {
  13245345: {
    name: 'Финик',
    rubles: 390,
    hryvnia: 129.09,
  },
  2456: {
    name: 'Изюм',
    rubles: 190,
    hryvnia: 62.89,
  },
  434: {
    name: 'Кешью',
    rubles: 999,
    hryvnia: 330.67,
  },
};

const list = document.querySelector('.goods_list');

function getGoods(obj, currency) {
  let str = '';

  for (const key in obj) {
    const el = obj[key];

    str += `<li>
                <p>Имя: ${el.name}</p>
                <p>Цена: ${el[currency]}</p>
            </li>`;
  }

  return str;
}

list.innerHTML = getGoods(goods, 'hryvnia');

<ul class="goods_list"></ul>

БЛОГ НА HUSL

JS Вывод элементов объекта через map по определенному условию?

Ответы (2 шт):