How to bind data to multiple elements using javascript

Give your ul element an id attribute, so you can reference it from code. I will assume it is called “container”. Initially it should just be an empty element, like

<ul id="container"></ul>

You should also have a URL where to make the request to. I’ll assume you have that in a variable url.

Then, you can add this code:

(async function request() {
    let response = await fetch(url);
    let { data } = await response.json();
    document.querySelector("#container").innerHTML = data.map(({ unique_id, status_name }, i) =>
        `<li>User${i}: <span class="change_status" unique_id="${unique_id}">${status_name}</span></li>`).join("\n");
    setTimeout(request, 10000);
})();

Leave a Comment