How to add text data from URL into an existing JavaScript array?

Question

So yeah, working on a project where I'm taking data from a text file on a web server and adding it to an array to display on an HTML document.

The text file on the web server, I'll just call values.txt, looks like this:

value b
value c
value d
value e
value f

This is the code of my current attempt:

const newArray = ["value a"];

const fileUrl = *url of values.txt*;
    fetch(fileUrl)
        .then(r => r.text())
        .then((text) => {
            const array2 = text.split("\n");

            for (let i = 0; i < array2.length; i++)
            {
                newArray.push(array2[i]);
            }
        })

document.getElementById("add").innerHTML += ("<br>Array test: " + newArray[1]);

In theory, newArray[1] should return value b, instead it returns as undefined.

You need to put the `innerHTML` assignment inside the `.then()` function. — Barmar, Jul 27 '23 at 03:49

score 1 · Answer 1 · answered Jul 27 '23 at 03:49

This is because of the asynchronous nature of the Fetch API. Move your code that update the DOM inside then block:

.then((text) => {
    const array2 = text.split("\n");

    for (let i = 0; i < array2.length; i++)
    {
        newArray.push(array2[i]);
    }
    //Update the DOM here
    document.getElementById("add").innerHTML += ("<br>Array test: " + newArray[1]);
});

How to add text data from URL into an existing JavaScript array?

1 Answers1