Блог

Главная - Вопросы по программированию - Проблема с извлечением данных JSON из S3 и созданием списка html

Проблема с извлечением данных JSON из S3 и созданием списка html

#javascript #html #json #amazon-s3 #fetch

#javascript #HTML #json #amazon-s3 #выборка

Вопрос:

У меня есть файл json, размещенный на S3, который я пытаюсь извлечь и использовать для записи ссылок в неупорядоченный список. Когда я тестирую свои json-данные, размещая их локально, с помощью json-сервера (на NPM), все работает отлично. Однако при извлечении из S3 список не выводится, хотя единственное отличие заключается в том, где размещен json. Я решил свои проблемы с разрешениями с помощью S3, и я успешно добился его извлечения, поскольку я смог зарегистрировать данные json в консоли, но не могу заставить его создать список.

 const jsonUrl_Q418 = 'http://localhost:3000/Letters';
fetch(jsonUrl_Q418)
  .then(res => res.json())
  .then(data => {
    for(let i=0; i < data.length; i  ) {
      let listItem = document.createElement('li');
      listItem.innerHTML = '<a href='   data[i].url   '>'  data[i].name   '</a>'; 
      lettersList.appendChild(listItem);
    }
  });

Если я изменю jsonUrl_Q418 на ссылку s3, это не будет работать так же. Любая помощь приветствуется.

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

1. Какие-либо ошибки в вашей консоли? Что такое lettersList ? Похоже, что это не определено

2. Ваши данные доступны в data.data.

3. Список букв был определен выше этого фрагмента. Это просто <ul>, который я создал. @DEVCNN спасибо, я проверю это, когда вернусь домой!

4. @DEVCNN Я попытался выполнить console.log (data.данные) и получил ошибку типа.

5. Дело в том, что я попробовал это с axios, и это сработало. Поэтому я надеялся, что fetch также может работать. Но fetch — это совсем другой модуль. Он возвращает буфер. Вам нужно будет прочитать этот буфер и преобразовать его в json. Я бы рекомендовал использовать axios, если это возможно.

Ответ №1:

В этом примере используется модуль выборки. Это должно зарегистрировать ваши данные. Обратите внимание, что объект ‘res’ представляет собой буфер, который можно прочитать, преобразовав его в строку. Теперь, если вам нужны данные в виде объекта — JSON.parse(res.toString(‘utf8’))

 fetch('https://s3.ap-south-1.amazonaws.com/misc-csv/tslint.json',
function(err,meta,res){
  console.log('AXIOS:',(res.toString('utf8')));
  return JSON.parse(res.toString('utf8'))
});