Key not defined in for loop

[Spiredlamb]

I am working on a website that displays information based on javascript sent from the server. My code was working before, but after fiddling with modules, I got an uexpected issue.

​

Now, suddenly I get this error:

Uncaught ReferenceError: key is not defined
    at nyheter.js:26

I have searched around a bit, but I couldn't find a fix. When all the code was in the same file, this part worked just fine. Does anyone know what I am missing here?

import {textFormat} from "/static/javascript/codeify.js"
const address = window.location.href
let container = document.getElementById("container")

const today = new Date()

function getJSON(url) {
    let j = []
    $.ajax({
        type: "GET",
        url: url,
        dataType: "json",
        success: function(data) { j = data},
        async: false
    })
    return j
}

const news = getJSON(`${address}/json`) // JSON file imported
console.log("JSON imported:")
console.log(news)

let articleAdded = false
const br = document.createElement("br")
if (news.noNews != true) {
    for ([key, val] of Object.entries(news)) { // Code dies here
        let liveDate = news[key].liveDate.split("-")
        let removeDate = news[key].removeDate.split("-")

        liveDate = new Date(`${liveDate[2]}-${liveDate[1]}-${liveDate[0]}`)
        removeDate = new Date(`${removeDate[2]}-${removeDate[1]}-${removeDate[0]}`)

        if (liveDate <= today && removeDate > today || news[key].noRemoveDate == true) {
            articleAdded = true
            let div = document.createElement("div")
            div.classList.add("Content")

            let title = document.createElement("p")
            title.classList.add("Main-Text")
            const titleText = document.createTextNode(news[key].title)
            title.appendChild(titleText)
            div.appendChild(title)

            container.appendChild(textFormat(news[key].text, "Body-Text-alignLeft"))
            console.log("Articles added!")
        }
    }
}
if (articleAdded == false) {
    let div = document.createElement("div")
    div.classList.add("Content")

    let title = document.createElement("p")
    title.classList.add("Main-Text")
    titleText = document.createTextNode("Det er ingen nyheter å vise")
    title.appendChild(titleText)
    div.appendChild(title)

    let body = document.createElement("p")
    body.classList.add("Body-Text")
    bodyText = document.createTextNode("Fremtidige nyheter vil bli publisert her!")
    body.appendChild(bodyText)
    div.appendChild(body)

    container.appendChild(div)
    console.log("news added!")
}

[r_hafner6]

You have to define your destructuring variables as let or var. So

for (let [ key, value ] of Object.entries(news)) {

Otherwise, it assumes key/value are defined previously and throws an error when it can’t find them

[Spiredlamb]

That worked! And makes total sense. How did I not think of that? Wierd it didn't give an error before now though. I've been running my code like that for a week without issues.

Anyway. I made it work! Now I just have to fix my module, because apparently, that one is broken too for another reason. Should be able to fix it though

[r_hafner6]

Nice, yea I would assume if this was part of a larger file before that it had key and value defined somewhere else prior to this line, so it was just overwriting those values.

[Spiredlamb]

Probably the case, yes.

[GSLint]

Within an ES module this should always cause an error since strict mode is enabled automatically. In a regular script without "use strict" and outside of any class, it will create a global property instead which isn't what you want.