Как вставить текст из json в html с помощью js

Question

Всем привет! Задача такая, нужно при клике на зодиак выводить в div class="text-here" определенный текст, который соответствует данному зодиаку. Для примера: овну соответствует текст "Овен самый крутой" и т.д. я так полагаю надо текст в json засунуть и уже оттуда как-то вытаскивать по айди или дата-атрибутам например.

<div class="wrapper">
  <div class="zodiac">Овен</div>
  <div class="zodiac">Телец</div>
  <div class="zodiac">Близнецы</div>
  <div class="zodiac">Рак</div>
  <div class="zodiac">Лев</div>
  <div class="zodiac">Дева</div>
  <div class="zodiac">Скорпион</div>
  <div class="zodiac">Стрелец</div>
  <div class="zodiac">Козерог</div>
  <div class="zodiac">Рыбы</div>
  <div class="zodiac">Близнецы</div>
  <div class="zodiac">Водолей</div>
</div>

<div class="text-here">Текст сюда</div>

Answer 1

Я бы сделал что-то вроде этого)

const wrapper = document.querySelector('.wrapper')
const textHere = document.querySelector('.text-here')

const zodiac = {
    aries: {name: 'Овен', text: 'Овен (21.03 – 20.04) – Огонь, Марс.'},
    taurus: {name: 'Телец', text: 'Телец (21.04 – 21.05) – Земля, Венера.'},
    twins: {name: 'Близнецы', text: 'Близнецы (22.05 – 21.06) – Воздух, Меркурий.'},
    cancer: {name: 'Рак', text: 'Рак (22.06 – 22.07) – Вода, Луна.'},
    lion: {name: 'Лев', text: 'Лев (23.07 – 21.08) – Огонь, Солнце.'},
    virgo: {name: 'Дева', text: 'Дева (22.08 – 23.09) – Земля, Меркурий.'},
    scales: {name: 'Весы', text: 'Весы (24.09 – 23.10) – Воздух, Венера.'},
    scorpion: {name: 'Скорпион', text: 'Скорпион (24.10 – 22.11) – Вода, Плутон.'},
    sagittarius: {name: 'Стрелец', text: 'Стрелец (23.11 – 22.12) – Огонь, Юпитер.'},
    capricorn: {name: 'Козерог', text: 'Козерог (23.12 – 20.01) – Земля, Сатурн.'},
    aquarius: {name: 'Водолей', text: 'Водолей (21.01 – 19.02) – Воздух, Уран.'},
    fish: {name: 'Рыбы', text: 'Рыбы (20.02 – 20.03) – Вода, Юпитер.'},
}

Object.entries(zodiac).forEach(entry => {
    const [key, value] = entry;
    const div = document.createElement('div')
    div.id = key
    div.innerHTML = value.name
    div.className = 'zodiac'
    div.style.cursor = 'pointer'
    wrapper.appendChild(div)
})

document.querySelectorAll('.zodiac').forEach(el => {
    el.addEventListener('click', () => {
        const text = zodiac[el.id].text
        textHere.innerHTML = text
    })
})

.zodiac {
  cursor: pointer;
}

<div class="wrapper"></div>
<div class="text-here">Текст сюда</div>

Answer 2

Действительно, можно использовать JSON для хранения текстов, соответствующих каждому знаку зодиака, и затем извлекать текст по атрибуту "data" каждого элемента "div" с классом "zodiac". Вот пример кода, который может помочь реализовать эту функциональность: HTML код:

<div class="wrapper">
  <div class="zodiac" data-zodiac="Овен">Овен</div>
  <div class="zodiac" data-zodiac="Телец">Телец</div>
  <div class="zodiac" data-zodiac="Близнецы">Близнецы</div>
  <div class="zodiac" data-zodiac="Рак">Рак</div>
  <div class="zodiac" data-zodiac="Лев">Лев</div>
  <div class="zodiac" data-zodiac="Дева">Дева</div>
  <div class="zodiac" data-zodiac="Скорпион">Скорпион</div>
  <div class="zodiac" data-zodiac="Стрелец">Стрелец</div>
  <div class="zodiac" data-zodiac="Козерог">Козерог</div>
  <div class="zodiac" data-zodiac="Рыбы">Рыбы</div>
  <div class="zodiac" data-zodiac="Близнецы">Близнецы</div>
  <div class="zodiac" data-zodiac="Водолей">Водолей</div>
</div>

<div class="text-here">Текст сюда</div>

JSON код:

{
  "Овен": "Овен самый крутой",
  "Телец": "Телец самый здравомыслящий",
  "Близнецы": "Близнецы самые общительные",
  "Рак": "Рак самый чувствительный",
  "Лев": "Лев самый гордый",
  "Дева": "Дева самая аккуратная",
  "Скорпион": "Скорпион самый страстный",
  "Стрелец": "Стрелец самый оптимистичный",
  "Козерог": "Козерог самый настойчивый",
  "Рыбы": "Рыбы самые мечтательные",
  "Водолей": "Водолей самый эксцентричный"
}

JavaScript код:

const zodiacs = document.querySelectorAll('.zodiac'); // Получаем все элементы с классом "zodiac"
const textHere = document.querySelector('.text-here'); // Получаем элемент, куда будем выводить текст

// Функция для вывода текста в элемент "div" с классом "text-here"
function setText(text) {
  textHere.innerText = text;
}

// Функция, которая будет вызываться при клике на элементы "div" с классом "zodiac"
function handleClick() {
  const zodiac = this.getAttribute

БЛОГ НА HUSL

Как вставить текст из json в html с помощью js

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