Как вывести в блоки информацию?

Question

[yapaofficial]

есть несколько блоков и в них нужно вывести данные как это лучше сделать?

let data = JSON.parse(response.data);
  score.innerHTML = data["score"];

  const btn_cursor = document.querySelector(".item-btn.cursor span");
  const cursor_price = data["cursor"].split(",");
  btn_cursor.innerHTML = "Купить за " + cursor_price[1];

в этом коде я вывел данные которые пришли мне с сервера в блок
но как можно это оптемизировать чтобы все выводилось в цикле во все блоки?
у блокв есть общий класс item-btn но есть дополнительный к примеру "cursor", "video-card"
и так далее

Answer 1

[HardBot]

Если я правильно понял, то вот решение

const { cursor, video_card } = JSON.parse(response.data);
document.querySelectorAll('.item-btn').forEach(itemBtn => {
  const itemType = itemBtn.classList[1];
  const btnSpan = itemBtn.querySelector('span');
  btnSpan.innerHTML = `Купить за ${eval(itemType + ".split(',')")[1]}`;
});

Comments

[HardBot]

yapaofficial, прочти тему - https://learn.javascript.ru/destructuring-assignment

Деструктуризация объекта

[HardBot]

HardBot, вот по другому

let data = JSON.parse(response.data);
const itemBtns = document.querySelectorAll('.item-btn');

itemBtns.forEach(itemBtn => {
  const itemType = itemBtn.classList[1];

  const btnSpan = itemBtn.querySelector('span');
  btnSpan.innerHTML = `Купить за ${itemBtn.dataset.itemValue}`;
});

В общем, используй как тебе хочется))

[yapaofficial]

HardBot,
Я слегка переделал ваш код

document.querySelectorAll('.item-btn').forEach(itemBtn => {
    const itemType = itemBtn.classList[1];
    const btnSpan = itemBtn.querySelector('span');
    if (typeof data[itemType] != "undefined") {
      const upgrade_data = data[itemType].split(",");
      btnSpan.innerHTML = `Купить за ${upgrade_data[1]}`;
    }
  });

а возможно ли в это мже коде вывести upgrade_data[0]
в другие блоки?
типо scroll_bar-item-multiplier cursor, scroll_bar-item-multiplier video-card и тд

я попытался сделать но выдает ошибку: Uncaught TypeError: невозможно установить свойства undefined (установка «innerHTML»)

const scroll_bar = document.querySelectorAll(".scroll_bar-item-multiplier");



let data = JSON.parse(response.data);
score.innerHTML = data["score"];

document.querySelectorAll('.item-btn').forEach(itemBtn => {
  const itemType = itemBtn.classList[1];
  const btnSpan = itemBtn.querySelector('span');
  if (typeof data[itemType] != "undefined") {
    const upgrade_data = data[itemType].split(",");
    btnSpan.innerHTML = `Купить за ${upgrade_data[1]}`;
    scroll_bar[itemType].innerHTML = upgrade_data[0];
  }
});

P.S я понял что itemType это "текст" а мне нужно число, получается его гдето надо взять, но вот где я не понимаю(

[yapaofficial]

yapaofficial,
надо было просто получить индекс элемента

document.querySelectorAll('.item-btn').forEach((itemBtn, index) => {});