Введение
У меня есть локальный файл 'countryballs.json', который я хочу загрузить в html и проанализировать данные в index.html.
Способ, которым я хочу это сделать, и единственный, который я знаю, это использовать Fetch () .Довольно прост в использовании.
Код
async function getData()
{
await fetch('./countryballs.json')
.then((response) => {
return response.json();
})
.then((data) => {
console.log(data);
})
.catch(function (error) {
console.log(error);
})
}
getData();
Объяснение кода
Выборка должна использоваться в асинхронной функции какон возвращает обещание (загрузка файлов занимает время)
await fetch () // Будет ждать, пока все не будет загружено.Остальная часть кода не требует пояснений ES6 JS-кодирования.
Проблема
При работе с внешними API (для погоды, финансов и прочего) он просто отлично работает,Я могу получить и проанализировать данные, и все идет хорошо.Даже загрузка локальных файлов CVS. Но не с моим локальным файлом JSON.
ОШИБКА
index.html:15 GET http://localhost:8080/countryballs.json 404 (Not Found)
XMLHttprequest log:
index.html:15 Fetch failed loading: GET "http://localhost:8080/countryballs.json".
Вопросы
- Почему он не работает и с файлами JSON?
- Чего мне не хватает в коде?
Пример .json
[
{
"country": [
{
"name": "Spain",
"GDP": " $1234",
"Regions": " Europe ",
"Align": " Western "
}
]
}
]
Люди с похожими проблемами, но с разными решениями или у меня это не сработало
Дополнительные пояснения для понимания проблемы
Папка, в которой я работаю, выглядит следующим образом:
узловые модули
index.html
countryballs.json
Я использую Node.js и код Visual Studio
- index.html выполняется на локальном хосте: 8080 с использованием браузера Chrome
Возможные решенияна этом я рассмотрел
- Использование файловой системы для загрузки (но все еще хочу попробовать fetch ())
Галерея изображений проблемы
(вывод на консоль Chrome)
Изменить:
Как некоторые из вас просили, я предоставлю то, что у меня есть, здесь и ниже инструкции по тестированию.
Файл GoogleDrive
1. Get node.js
2. cd into the folder with the index.html and the rest
3. call for `node http-server`
4. get into the browser and connect to localhost:8080