Inserting and accessing JS Array from a JSON file content

Hi, please remember that js is asynchronous ( you have to wait for the response, in order to console.log it ). This is the reason why you get list undefined .

I advise you to use fetch instead of loadJSON. Here is a code snippet:

const url = "https://picsum.photos/v2/list"
let list = []
async function init() {
  let data = await fetch(url).then(res => res.text())
  let data_list = JSON.parse(data)
  for(el of data_list){
    list.push(el.url)
  }
  console.log("list:",list)
  console.log("list.length:",list.length)
}

init()

For example:

let list = []
loadJSON(...()=>{
    ....
    list = ["element1","element2"]
})
console.log(list) // list will be undefined

You would have to wait for loadJson to populate the list. This is due to the fact that javascript will run the function loadJSON, but it will not wait for it to finish, and will continue to run the rest of the code. When the line console.log(list) is executed, if loadJSON has not finished yet, list array will be undefined.

That's because you're initializing the array with 30 empty elements and the indexes you're trying to console log are within that first 30 empty elements anyway. Look at the indexes in the browser console, they start at 30, so if you actually try to console.log(list[55]) you will get a defined value.

Remove the 30 from the list constant and it will work.