Как сделать вывод json в html по нажатию на кнопки

Question

Мне нужно что бы была информация в json на 3 товара (название, описание) В самом html есть 3 кнопки и по нажатию на кнопку 1 выводился название товара 1 и его описание в html и так далее

КАК ЭТО РЕАЛИЗОВАТЬ НЕ ЗНАЮ. ПОМОГИТЕ ПОЖАЛУЙСТА

var myObject = {
  "catalogo": [{
      "id": 0,
      "name": "one",
      "description": "111"
    },
    {
      "id": 1,
      "name": "two",
      "description": "222"
    },
    {
      "id": 2,
      "name": "three",
      "description": "333"
    }
  ]
};

let name = document.getElementById('name')
let description = document.getElementById('description')

const bnt1 = document.getElementById('bnt1')
const bnt2 = document.getElementById('bnt2')
const bnt3 = document.getElementById('bnt3')

<div>
  <h1 id="name"></h1>
  <p id="description"></p>
  <div>
    <button id="bnt1">1</button>
    <button id="bnt2">2</button>
    <button id="bnt3">3</button>
  </div>
</div>

Answer 1

Самое первое решение, которое напрашивается "в лоб", это для каждой кнопки создать свой обработчик клика и в явном виде прописать, что надо выводить(захардкодить значения):

const myObject = {
  "catalogo": [
    {"id": 0, "name": "one", "description": "111"},
    {"id": 1, "name": "two", "description": "222"},
    {"id": 2, "name": "three", "description": "333"}
  ]
};

let name = document.getElementById('name')
let description = document.getElementById('description')

const bnt1 = document.getElementById('bnt1')
const bnt2 = document.getElementById('bnt2')
const bnt3 = document.getElementById('bnt3')

bnt1.addEventListener('click', () => {
  name.innerText = myObject.catalogo[0].name;
  description.innerText = myObject.catalogo[0].description;
})

bnt2.addEventListener('click', () => {
  name.innerText = myObject.catalogo[1].name;
  description.innerText = myObject.catalogo[1].description;
})

bnt3.addEventListener('click', () => {
  name.innerText = myObject.catalogo[2].name;
  description.innerText = myObject.catalogo[2].description;
})

<div>
  <h1 id="name"></h1>
  <p id="description"></p>
  <div>
    <button id="bnt1">1</button>
    <button id="bnt2">2</button>
    <button id="bnt3">3</button>
  </div>
</div>

Это довольно плохой вариант, однако в рамках обучения, "на троечку", подойдет.

Далее, "На четверочку", можно улучшить код. Мы видим в нем в явном виде дубликат кода. Вынесем обработчик клика в отдельную функцию

const myObject = {
  "catalogo": [
    {"id": 0, "name": "one", "description": "111"},
    {"id": 1, "name": "two", "description": "222"},
    {"id": 2, "name": "three", "description": "333"}
  ]
};

let name = document.getElementById('name')
let description = document.getElementById('description')

const bnt1 = document.getElementById('bnt1')
const bnt2 = document.getElementById('bnt2')
const bnt3 = document.getElementById('bnt3')

function btnClick(id) {
  name.innerText = myObject.catalogo[id].name;
  description.innerText = myObject.catalogo[id].description;
}

bnt1.addEventListener('click', () => {
  btnClick(0)
})

bnt2.addEventListener('click', () => {
  btnClick(1)
})

bnt3.addEventListener('click', () => {
  btnClick(2)
})

<div>
  <h1 id="name"></h1>
  <p id="description"></p>
  <div>
    <button id="bnt1">1</button>
    <button id="bnt2">2</button>
    <button id="bnt3">3</button>
  </div>
</div>

Однако опять же у нас есть незначительный дубликат кода и остались захардкоженные значения. Улучшаем!

Выберем все элементы button на странице и в цикле, каждой кнопке назначим обработчик, передавая событие щелчка мышки. Так же модифицируем функцию обработчик. Будем считать, что названия кнопок это номер позиции элемента

const myObject = {
  "catalogo": [
    {"id": 0, "name": "one", "description": "111"},
    {"id": 1, "name": "two", "description": "222"},
    {"id": 2, "name": "three", "description": "333"}
  ]
};

let name = document.getElementById('name')
let description = document.getElementById('description')

function btnClickC(event) {
  const id = +event.target.innerText -1;
  name.innerText = myObject.catalogo[id].name;
  description.innerText = myObject.catalogo[id].description;
}

document.querySelectorAll('button').forEach(button => {
  button.addEventListener('click', btnClickC)
});

<div>
  <h1 id="name"></h1>
  <p id="description"></p>
  <div>
    <button id="bnt1">1</button>
    <button id="bnt2">2</button>
    <button id="bnt3">3</button>
  </div>
</div>

Ну или можно воспользоваться bind и передавать в this индекс кнопки

const myObject = {
  "catalogo": [
    {"id": 0, "name": "one", "description": "111"},
    {"id": 1, "name": "two", "description": "222"},
    {"id": 2, "name": "three", "description": "333"}
  ]
};

let name = document.getElementById('name')
let description = document.getElementById('description')

function btnClickU() {
  name.innerText = myObject.catalogo[this].name;
  description.innerText = myObject.catalogo[this].description;
}

document.querySelectorAll('button').forEach((button, index) => {
  button.addEventListener('click', btnClickU.bind(index))
});

<div>
  <h1 id="name"></h1>
  <p id="description"></p>
  <div>
    <button id="bnt1">1</button>
    <button id="bnt2">2</button>
    <button id="bnt3">3</button>
  </div>
</div>

Наверное самый правильный вариант, это создавать кнопки под каждый элемент массива:

const myObject = {
  "catalogo": [
    {"id": 0, "name": "one", "description": "111"},
    {"id": 1, "name": "two", "description": "222"},
    {"id": 2, "name": "three", "description": "333"}
  ]
};

let name = document.getElementById('name')
let description = document.getElementById('description')

const container = document.getElementById('btnCont');

myObject.catalogo.forEach((elem, index) => {
  const btn = document.createElement('button');
  btn.innerText = elem.id + 1;
  btn.addEventListener('click', function() {
    name.innerText = elem.name;
    description.innerText = elem.description;
  })
  container.appendChild(btn);
})

<div>
  <h1 id="name"></h1>
  <p id="description"></p>
  <div id='btnCont'></div>
</div>

В таком случае, при изменении количества элементов в массиве, править код не надо будет

БЛОГ НА HUSL

Как сделать вывод json в html по нажатию на кнопки

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