Как я могу добавить в HTML из JSON?

Question

Я пытался добавить данные из JSON в HTML в течение нескольких дней.На самом деле, я сделал это.Но есть такая ситуация.У меня есть переменная INDEX.Его значение равно нулю при запуске.У меня есть две функции запуска.Один уменьшает значение INDEX, а другой увеличивает значение.При нажатии одной из кнопок значение INDEX увеличивается или уменьшается.Когда значение INDEX изменяется, данные из JSON не изменяются.Итак, данные в нулевом индексе не заменяют следующие.

$(document).ready(function () {
    "use strict";

    class Request {
        get(url) {
            return new Promise((resolve, reject) => {
                fetch(url).then(res => res.json()).then(data => resolve(data)).catch(err => reject(err));
            })
        }
    }
    const Requesting = new Request();
    Requesting.get("js/carousel.json").then(data => {
        add(data);
    });

    const carousel_baslik = document.querySelector(".carousel-baslik");
    const carousel_metin = document.querySelector(".carousel-metin");
    const carousel_image = document.querySelector(".carousel-image");
    const counter = document.querySelector("#counter");
    const icon = document.querySelector("#icon-ground");
    const controller1 = document.querySelectorAll(".carousel-controller")[0];
    const controller2 = document.querySelectorAll(".carousel-controller")[1];
    var index = 0;
    controller1.addEventListener("click", geri);
    controller2.addEventListener("click", ileri);

    function geri() {
        index--;
        console.log(index);

    }

    function ileri() {
        index++;
        console.log(index);
    }

    function add(data) {
        carousel_baslik.textContent = data[index].baslik;
        carousel_metin.innerHTML = data[index].metin;
        carousel_image.src = data[index].image;
        counter.textContent = data[index].count;
        const img = `<img src="${data[index].icon}" class="w-100" alt="">`;
        icon.innerHTML = img;
    }
});

Answer 1

Если вы хотите изменить icon.innerHTML снова, то вам действительно нужно изменить его снова .

Изменение значения index не приводит к тому, что JavaScript возвращается во времени до того, как вы прочитаете значение index, чтобы сгенерировать исходный код <img>, что приведет к обратному обновлению DOM.

Вам необходимо обновить DOM снова , после вы дадите index новое значение.