TypeScript object shows all values as defined but then values come back as undefined

I am trying to dynamically define an object in typeScript with a for loop.

Here is the code for that

        var n = 7 
        interface LooseObject {
            [key: string]: any
        }
        var boardValues: LooseObject = {}
        for (var i = 0; i <= n; i++){
            for(var j = 0; j <= n; j++){
                var boardIndex = 8*(n-i)+j
                boardValues[`n${boardIndex}`] = `n${boardIndex}`
                console.log("generating boardValues",boardValues[`n${boardIndex}`]) //outputs the expected result e.g. n15
            }
        }

Here is a gif showing the output

While running the loop the console.log gives the expected output (e.g. n7). However when I then output the boardValues object created to the console only n16 to n47 are defined. Even weirder is that chrome shows the values as defined properly until I expand the object to see all values and then shows them as undefined.

What am I doing wrong? (I am new to typeScript and not great at programming so sorry for poor practices)

Answer

I think your code works fine, it’s just that the boardValues properties are not sorted (e.g n50 might be the first key shown, and n7 could be in the middle);

To see all the keys set, try:

console.log(Object.keys(boardValues).sort((a,b)=>Number(a.slice(1))-Number(b.slice(1))))