Console Display Uncaught TypeError

Question

Uncaught TypeError: Cannot read property '6' of undefined at XMLHttpRequest.xhttp.onreadystatechange (main.js:36) at HTMLDivElement.

I'm working on a little game to learn and practice JavaScript, I want to get information that I stored in a json file, to get the information from a property of an array of objects I obviously use: arrayOfObjects[index].propertyOfObject, which in my code is firstNShape.innerHTML = firstShape[randomFirstShape]; it works fine but I get the error:

Uncaught TypeError: Cannot read property '6' of undefined at XMLHttpRequest.xhttp.onreadystatechange (main.js:36) at HTMLDivElement.

in the console of the browser, I know what the error means but I don't understand why the console shows the "Cannot read property '6'" when the 6 it's the index, not a property, the property is name, Am I doing something wrong?

Here is my code:

const xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
      var cardsInfo = JSON.parse(xhttp.responseText);
    }

    for (let i = 0; i < 2; i++) {
      //Choose a random value for card
      let randomFirstValue = Math.floor(Math.random() * 13);
      let randomFirstShape = Math.floor(Math.random() * 4);
      let firstShape = ["♥", "♦", "♣", "♠"];

      //create the card
      let firstCard = document.createElement("div");
      firstCard.classList.add("card");
      firstCard.classList.add("cardDisplay");

      //Add value to the card
      let firstNValue = document.createElement("p");
      firstNValue.innerHTML = cardsInfo[randomFirstValue].name;
      firstCard.appendChild(firstNValue);

      //Add shape to the card
      let firstNShape = document.createElement("p");
      firstNShape.innerHTML = firstShape[randomFirstShape];
      firstCard.appendChild(firstNShape);
      //Append card to the card container
      cardContainer.appendChild(firstCard);
    }
}

Here is my JSON file, it's simple but I'm just doing it to learn and practice JSON along with JS.

[
  {
    "name": "A",
    "value": 1,
    "value2": 11
  },
  {
    "name": "2",
    "value": 2
  },
  {
    "name": "3",
    "value": 3
  },
  {
    "name": "4",
    "value": 4
  },
  {
    "name": "5",
    "value": 5
  },
  {
    "name": "6",
    "value": 6
  },
  {
    "name": "7",
    "value": 7
  },
  {
    "name": "8",
    "value": 8
  },
  {
    "name": "9",
    "value": 9
  },
  {
    "name": "10",
    "value": 10
  },
  {
    "name": "J",
    "value": 10
  },
  {
    "name": "Q",
    "value": 10
  },
  {
    "name": "K",
    "value": 10
  }
]

Well I can see a couple of things that may cause your problem. Firstly you need all of your logic in that if block. You are continuing even if that variable is not set. Which is probs why it is showing undefined — Jazz, Jul 04 '21 at 15:03
That works fine! I tried that before but I don't know why it didn't work, but any way, clearly I did something wrong. Thx @Jazz!! — Jank, Jul 04 '21 at 15:11

score 0 · Accepted Answer · answered Jul 04 '21 at 15:16

0

I solved with help of Jazz, all I did is put all the logic inside of the if statement, since if it is outside it will run even if the condition is not completed, I know is so simple but I'm new.

answered Jul 04 '21 at 15:16

Jank

1
3

Console Display Uncaught TypeError

1 Answers1