Массив JSON из экспресс-маршрута не определен в консоли React

#node.js #json #reactjs #express #routes

#node.js #json #reactjs #экспресс #маршруты

Вопрос:

В настоящее время я работаю над веб-приложением для управления внешней базой данных. На данный момент я не очень хорошо знаком с express или NodeJS, поэтому я хотел спросить, как отправить объект JSON на консоль клиентских сторон, не получив undefined? У меня есть эта функция для подключения, затем выберите то, что мне нужно, а затем я преобразовал свой объект JSON в массив объектов JSON. Он также отлично отображает данные в консоли.

 async function connect() {
  try {
    await sequelize.authenticate();
    console.log('Connection has been established successfully.');
  } catch (err) {
    console.error('Unable to connect to the database:', error);
  }

  info = await sequelize.query('select * from LeadsInformation', { type: QueryTypes.SELECT });
  const details = JSON.stringify(info);
  console.log(details);
  detailsArray = JSON.parse(details);
  console.log(detailsArray);
} 

Здесь все работает нормально, я могу получить данные и отобразить их в терминале.
Это мой маршрут получения:

 app.get("/list", (req, res) => {
  connect();
  res.json(detailsArray)
}); 

Я попробовал несколько предложенных способов, основанных на других объяснениях и фрагментах кода, но пока ни один из них не сработал, поэтому я оставил это так. Я думал, что предварительный просмотр самих данных в запросе будет решением, но это не сработало. Я также пытался использовать сам JSON и пытался отобразить его, а также пытался использовать библиотеку синтаксического анализа тела. Хотя библиотека не обновлялась в течение двух лет. Также я использую axios для извлечения данных. Он отлично работает, когда я пытаюсь отправить простую строку, например, «hello world».

Есть ли что-нибудь, чего мне не хватает, или у вас есть какие-либо другие решения? Я также был бы признателен за объяснение, если это возможно.

Редактировать: возможно, также придется что-то делать с тем, как я получаю ответ во внешнем интерфейсе. Я также рассмотрю это и обновлю эту тему, если разберусь с этим!

Именно так я получаю ответ. В настоящее время я пытаюсь отобразить в консоли. Я использую axios API.

   Axios({
    method: "GET",
    url: "http://localhost:5000/list",
    headers: {
      "Content-Type": "application/json"
    }
  }).then(res => {
    console.log(res.data.json);
  }); 

Ответ №1:

Вероятно, у вас есть undefined в маршруте, потому connect что функция ничего не возвращает. Также connect это асинхронная функция, это означает, что она возвращает обещание, и вам нужно вызвать .then метод или использовать await , чтобы получить из него значение.

Вот фрагмент кода с исправлениями, которые я описал выше.

 async function connect() {
  try {
    await sequelize.authenticate();
    console.log('Connection has been established successfully.');
  } catch (err) {
    console.error('Unable to connect to the database:', error);
  }

  info = await sequelize.query('select * from LeadsInformation', { type: QueryTypes.SELECT });
  const details = JSON.stringify(info);
  detailsArray = JSON.parse(details);
  return detailsArray;
}
 
 app.get("/list", async (req, res) => {
  const result = await connect();
  res.json(result)
});
 

Обратите внимание, что в функции обработчика маршрутизатора я также использую async и await потому, что я вызываю connect , которая является асинхронной функцией.

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

1. Спасибо! Теперь это имеет больше смысла. Хотя мне было интересно, что-то не так с тем, как я пытаюсь отобразить его в своем интерфейсе (react)? Я все еще не определен, даже после того, как попробовал ваш snipped. После выполнения теста я заметил, что он по-прежнему нормально отображается в терминале, но не в моем интерфейсе. Мой интерфейс — Reactjs.

2. Вы должны быть уверены, что ответ от конечной точки API /list правильный. Затем вы можете выяснить, что не так с интерфейсом, и проверить логику клиентов. Пожалуйста, добавьте фрагмент кода из клиентского приложения к проблеме… Но сначала дайте мне знать, каков ответ от конечной /list точки.

3. Ответ от конечной точки показывает undefined. Он подключается, поскольку я протестировал его с помощью базового сообщения «Страница списка», которое фактически отображалось в консоли, поэтому я предполагаю, что это может быть проблема с моей клиентской стороной или, возможно, с тем, как я отправил. Я добавлю фрагменты!

4. Но если вы имели в виду, если я получил 404 no, на самом деле он просто отображает undefined, он знает, что я получаю ответ, но он не получен должным образом.

5. Обновление: мне удалось это исправить, что-то не так с тем, как я пытался отобразить свой ответ!

Ответ №2:

Приведенное выше решение сработало, а также другая проблема, с которой я столкнулся, заключалась в том, что я неправильно получал ответ. В итоге я получил ответ на интерфейс после изменения моего кода на следующий из:

 console.log(res.data.json); 

Для:

  console.log(res.data[1]);