Задать вопрос
MaminProgrammist
@MaminProgrammist
Я слава беброу
javascript

Почему выводится ошибка Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'push')?

Есть такой код
HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <link
      href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div id="wrapper"></div>

    <script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>
    <script src="index.js"></script>
  </body>
</html>


JS
const table = new gridjs.Grid({
    columns: ["Code", "Flag", "Name", "Capital", "Population"],
    data: []
}).render(document.getElementById("wrapper"));
async function printCountry() {
    let country = prompt('Enter the name of the country you want to compare')
    const [aj] = await fetch(`https://restcountries.com/v3.1/name/${country}`)
    .then(response => {
    return response.json()
    })

    console.log(aj)

    const tableMassive = [];
    tableMassive.push(aj.altSpellings[0])
    tableMassive.push(aj.flags.png)
    tableMassive.push(aj.capital[0])
    tableMassive.push(aj.popultaion)

    table.data.push(tableMassive)
    alert(tableMassive)
}

printCountry()

printCountry()

Код должен спрашивать у пользователя 2 страны, а потом с помощью api берётся информация про эти страны. Далее информация должна идти в таблицу

И вроде все хорошо, но открытии страницы, в таблице ничего нет, а в консоль выводит ошибку - Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'push')

Как я понял, это связанно с тем, что я пытаюсь впихнуть что-то туда, чего на данный момент - нет. Скорее всего это из-за того, что функция printCountry() - асинхронна.
Как мне изменить код, чтобы исправить ошибку?
  • Вопрос задан
  • 2661 просмотр
3 комментария
Подписаться 1 Средний 3 комментария
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
Так написано же всё в сообщении об ошибке. Кинуть в консоль получаемые данные догадались, а произвести аналогичную операцию над table.data и увидеть, что оно undefined - уже нет?

Как мне изменить код, чтобы исправить ошибку?

Код настолько отвратительный, что я бы переписал с нуля:

const countries = Array.from({ length: 3 }, prompt);

new gridjs.Grid({
  columns: [
    'Code',
    { name: 'Flag', formatter: val => gridjs.html(`<img src="${val}">`) },
    'Name',
    'Capital',
    'Population',
  ],
  data: () => Promise.all(countries.map(n =>
    fetch(`//restcountries.com/v3.1/name/${n}`)
      .then(r => r.json())
      .then(([ r ]) => [
        r.altSpellings[0],
        r.flags.png,
        r.name.common,
        r.capital[0],
        r.population,
      ])
      .catch(() => [ ,,`${n} - это не страна`,, ])
  )),
}).render(document.querySelector('#wrapper'));
Ответ написан
3 комментария
3 комментария
Пригласить эксперта
Ответы на вопрос 1
Vest
@Vest
Я тут за вас погулил, и решение оказалось таким:
table.updateConfig({data: tableMassive}).forceRender();

Данных всё равно в таблице я не увидел, но хотя бы вы можете двигаться дальше.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Frontend-разработчик JavaScript
div. • Ставрополь
от 40 000 до 90 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Несложная верстка из Figma bootstrap5 scss npm
18 дек. 2024, в 04:59
1000 руб./в час
Отправка команды на открытие всех окон автомобиля Chery Tiggo 7 Pro
18 дек. 2024, в 03:28
16000 руб./за проект
Установить музыкальный софт
18 дек. 2024, в 01:04
5000 руб./за проект
Ещё заказы