JavaScript - "forEach is not a function" inside fetch().then(); refuses to be converted to an array

Question

so, I have made use of the fetch API to...

1. get a JSON File off my local server
2. insert the contents into a element, with appropriate Values, etc. (currently Non-Functional, but also not relevant)

The JSON File: roughly like this: [["hello.css", "world.css", "why.css"], "doesn't.css", "this.css", "work.css"]

The Conditions: if there is a big Group of Strings in an array, inside the array, then turn that into a <optgroup>.

Where it Fails: in the Initialization of the first forEach function.

What I have found out:

• The Recieved Text is treated as an Object, obiously making it fail.
• It also fails to convert it into an array. Either it is empty or fails differently. Look further below for my attempts.
• It is already parsed, apperently, because with JSON.parse it throws an error, complaining about it.

The Code

fetch('./themes.json').then(theResponse => {
    let themesJSON = theResponse.text();
    console.log(themesJSON); /* All "console.log()" functions are for debugging purposes */
    themesJSON.forEach(elm => {
        let the = '';
        if (elm.length > 1) {
            let optgroup = document.createElement('optgroup');
            elm.forEach(elm => {
                let opt = document.createElement('option');
                opt.value = elm;
                opt.innerText = elm;
                optgroup.insertAdjacentElement('beforeend', opt);

                console.log(opt);
            })
            the.insertAdjacentElement("beforeend", optgroup)

            console.log(optgroup);
        } else {
            let opt = document.createElement('option');
            opt.value = elm;
            opt.innerText = elm;
            the.insertAdjacentElement('beforeend', opt);

            console.log(opt);
        }
        document.getElementById('themeSelection').insertAdjacentElement("beforeend", the);
        console.log(the);
    });
})

The Attempts

• This Answer Here, returns an empty array, and is not an object anymore, i think
• Another Answer under the same post, exact same result.
• whatever this is, only tried the first option, as the other one, well, I didn't fully understand it, result? I don't recall anymore.

Answer 1

You are using:

let themesJSON = theResponse.text();

which returns a promise that resolves to a string.

What you need is JavaScript representation of your JSON file.

For that the correct syntax would be like this:

fetch('./themes.json')
.then(theResponse => theResponse.json())
.then(actualArray => {
    console.log(actualArray)
})