无需在网页上创建更多元素即可更新 HTML 数据

Question

Have an interval that loads the html every 3 secs, but want to refresh it and not keep adding more under the already made code.

async function Products(){
            setInterval(async function() {
                const response = await fetch('http://localhost:3000/api/products');
                const data = await response.json();

                const mainContainer = document.getElementById("myData");
                for (let obj of data) {
                    const div = document.createElement("div");
                    div.innerHTML = `${obj["sku"]}: ${obj["name"]}`;
                    mainContainer.appendChild(div);
                }
            }, 10000)
        }

When I click a start button everything works, but how do i make it refresh the already made HTML rather than repeatedly recreating it with the interval. Trying to figure out a good approach to this. Thanks

Answer 1

Create and append a <div> immediately, and in the interval, assign to its innerHTML :

function Products() {
    const container = document.getElementById("myData").appendChild(document.createElement("div"));
    setInterval(async function () {
        const response = await fetch('http://localhost:3000/api/products');
        const data = await response.json();
        container.innerHTML = '';
        for (let obj of data) {
            container.innerHTML += `${obj["sku"]}: ${obj["name"]}`;
        }
    }, 10000)
}

Answer 2

I think what you are trying to do is implement a Serie of observable elements that you can look only for those who have changed instead of all the data, something like React does with the virtual DOM.

Considering the code tout already posted, refreshing elements at a set interval is a bad idea. What if you have 1000 user refreshing at the same time? What if it cause your response tone to be more then 3 seconds?

That said, if you really want to work on creating something like that, you have to find a way to load not all the products from the api, but only the ones that are different. Again, if you want to keep it that way, here are, in my opinion, what you could do:

1. Start by loading all the product on the page, but set an interval to check a new Endpoint which would tell you what products have been added after the last one.

2. Use either an index or a key to identify which product is which, so tout know the ones you have.

3. You need a way to know quick product was updated since the last load.

That's a start. You can implement these in different way. I would suggest having a timestamp for the time created and updated, so you can then query only those who fall after this timestamp.

Add a dynamic ID to your product elements, (eg <div id=${sku} >**Product Here**<\\div> That way, you can track your product and recreate only the ones who changed/are new.

That's obviously a complicated way of implementing an open connection, if you want another solution, you could also open a Socket with your api, which would send event for data updated and created and would ultimately make your 3 second ping obsolete, resulting in a better scalability in my opinion.