Задать вопрос
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() - асинхронна.
Как мне изменить код, чтобы исправить ошибку?
  • Вопрос задан
  • 1865 просмотров
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 разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Анимация логотипа
24 апр. 2024, в 00:08
20000 руб./за проект
Разработка дизайна раздела «Статьи» на сайте «Мир отходов»
23 апр. 2024, в 23:01
10000 руб./за проект
Дизайн личного кабинета (клиентская часть)
23 апр. 2024, в 22:37
500 руб./в час
Ещё заказы