Trying to receive information from a JSON file and result is NULL

Question

I'm trying to get data from a .json file and the result seems to be null.

I have been trying this and it has worked before with the exact same code and it worked perfectly

let ItemList = "./ItemList.json"
let request = new XMLHttpRequest();
request.open('GET', ItemList)
request.responseType = "json"
request.send()
request.onload = function () {
  const Items = request.response
  console.log(Items[0])
}

My questions are why is it the error Cannot read property '0' of null at XMLHttpRequest.request.onload and how can I fix it,

And my second question is, what is a better way to do this.

I have tried other things like referencing it further in such as console.log(Items.Test.TestCategory.TestProduct) and that still didn't work

My Json File

{
  "AnotherTestProduct":[1,2], //this is what I'm trying to get
  "Test": {
    "TestCategory":{
      "TestProduct": [0, "TestProduct", 5, 10, 0],//[Id, Name, Customer price, Stock price, inStock]
    }
  },
  "Food": {
    "Candy": {
      "Chocolate-Bar": [0,""]
    }

    
  }
}

My code that worked perfectly

 let PeopleNames = "./PeopleNames.json"
  let request = new XMLHttpRequest();
  request.open('GET', PeopleNames)
  request.responseType = 'json';
  request.send();
  request.onload = function () {
    const Names = request.response;
    function Genders(Gender) {
      if (Gender === 0)
        return Names.firstNamesF[getRandomInt(999)] + " " +
          Names.lastNames[getRandomInt(986)]

      else if (Gender === 1) {
        return Names.firstNamesM[getRandomInt(999)] + " " +
          Names.lastNames[getRandomInt(986)]
      }
    }
    Generator = Genders(getRandomInt(2));
    function getRandomInt(max) {
      return Math.floor(Math.random() * max);
    }
    var div = document.getElementById("name")
    div.innerHTML = Generator
  }

The Json that worked basically went

"firstNamesF": ["Emma", + 989 more strings]
"firstNamesM": ["Bob", + 989 more strings]
"lastNames": ["Wilson" + 970 more strings]

Answer 1

One reason you may receive an error for one file and not another is likely due to the size. Bigger the size the longer it takes to process. If you increase the size of people.json do you get the same error?

If you are new to javascript it may sound weird but JS doesn't wait on code before executing the next line. So even though in the code you said open the file before onload, JS will try to onload before open finishes.

If you increase the size of people.json and you still get an error try wrapping the XHR request in a promise function.

const getData = (uri) => {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open('get', uri, true);
        xhr.responseType = 'document';
        xhr.onload = () => {
            const status = xhr.status;
            if (status == 200) {
                // complete your function
                // Think about resolve as return.
                // It's not the same but it is.
                resolve(SOMETHING)
            } else {
                reject(status);
            }
        };
        xhr.send();
    });
}

Then when you need to get something do this

const uri = './ItemList.json'

const getProducts = async (uri) => {

   const data = await getData(uri);
   // Do something here
}

Answer 2

request.onload = function () {
  const Items = request.response
  console.log(Items[0])
}

You are trying to print an array value of your JSON object

request.onload = function () {
  const Items = request.response;
  const myFirstKey = Object.keys(Items)[0];
  console.log(Items[myFirstKey])
}

Your JSON:

{ "AnotherTestProduct":[1,2], //this is what I'm trying to get

Answer 3

Your JSON is not valid. Invalid JSON will not parse. You can check it here:

https://jsonlint.com/

  "TestProduct": [0, "TestProduct", 5, 10, 0],

has an extraneous comma at the end, should be

  "TestProduct": [0, "TestProduct", 5, 10, 0]