На дисплее консоли Обнаружена ошибка типа

#javascript #typeerror #javascript-objects #google-chrome-console

Вопрос:

Неперехваченная ошибка типа: Не удается прочитать свойство «6» неопределенного в XMLHttpRequest.xhttp.onreadystatechange (main.js:36) в HTMLDivElement.

Я работаю над небольшой игрой для изучения и практики JavaScript, я хочу получить информацию, которую я сохранил в файле json , чтобы получить информацию из свойства массива объектов, которые я, очевидно, использую: arrayOfObjects[index].propertyOfObject , что в моем коде firstNShape.innerHTML = firstShape[randomFirstShape]; работает нормально, но я получаю ошибку:

Неперехваченная ошибка типа: Не удается прочитать свойство «6» неопределенного в XMLHttpRequest.xhttp.onreadystatechange (main.js:36) в HTMLDivElement.

в консоли браузера я знаю, что означает ошибка, но я не понимаю, почему консоль показывает «Не удается прочитать свойство» 6″», когда 6-это индекс, а не свойство, свойство-имя, я делаю что-то не так?

Вот мой код:

 const xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function () {
    if (this.readyState == 4 amp;amp; 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);
    }
}
 

Вот мой файл JSON, это просто, но я просто делаю это, чтобы изучать и практиковать JSON вместе с 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
  }
]

 

Комментарии:

1. Можете ли вы поделиться тем, как выглядит ваш ответ JSON?

2. @Jazz конечно, я собираюсь отредактировать свой вопрос

3. Ну, я вижу пару вещей, которые могут вызвать вашу проблему. Во-первых, вам нужна вся ваша логика в этом блоке if. Вы продолжаете, даже если эта переменная не задана. Вот почему, вероятно, он показывает неопределенное

4. Это прекрасно работает! Я пробовал это раньше, но не знаю, почему это не сработало, но в любом случае ясно, что я сделал что-то не так. Thx @Джаз!!

Ответ №1:

Я решил с помощью Jazz, все, что я сделал, это поместил всю логику внутри оператора if, так как, если он находится снаружи, он будет выполняться, даже если условие не выполнено, я знаю, что это так просто, но я новичок.