Как перебрать внешний JSON и вывести данные в дерево DOM?

Question

[Ivan]

Есть файл JSON который лежит в корне. Необходимо, чтобы li заполнялись из "links"(content.json), а блок "right", отображал текст из "content"(content.json) по нажатию на li.

Например:
Кликаем по первой li, в правом блоке отображается text_1(подгружается из json)
Кликаем по третьей li, в правом блоке отображается text_3.

У меня получилось только заполнить все li, но они заполняются все, значением последнего ключа: header_link_5

https://codepen.io/stevegerr/pen/ZEzQrQj

Answer 1

[Stockholm Syndrome]

const right = document.querySelector('.right');
const links = document.querySelectorAll("li");
const handleClick = (e) => right.textContent = data.content[data.links.indexOf(e.target.textContent)].news;


links.forEach((elem, i) => {
  elem.textContent = data.links[i];
  elem.addEventListener('click', handleClick);
});

Comments

[Ivan]

Не известный мне синтаксис!) Что за data? Не гуглится даже! Если вам не трудно, прокомментируйте пожалуйста!

[Stockholm Syndrome]

Ivan, data это ваш уже распаршенный json-объект

[Ivan]

Stockholm Syndrome, А, понял! Благодарю!