Не могу загрузить мой файл JSON: сбой HTTP во время синтаксического анализа JSON
Я пытаюсь загрузить действительный файл json, но получаю сообщение об ошибке:
Http failure during parsing for ... .json
recipe.component.ts
url = '../../files/recipes.json';
recipes;
constructor(private fileService: FileLoaderService) {}
ngOnInit() {
this.fileService.getData(this.url).subscribe(res => console.info(res));
}
file-loader.service.ts
constructor(private http: HttpClient) { }
getData(url: string): Observable<any> {
return this.http.get(url);
}
Если бы я делал это через CLI, а не на stackblitz, я бы сделал это таким же образом. Просто не знал, почему я не мог.
Даже это не работает? url = '/assets/recipes.json';
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Имея экспорт
export const recipes = [
{...}
]
делает его недействительным json-документом. Не используйте экспорт, удалите его
Файл JSON должен быть просто файлом json.
[
{...}
]
Ой. Забыл, что я оставил это, когда конвертировал обратно из .ts. Не должно было его спасти.
Соедините это неправильно и отсутствует здесь:
Это недопустимый файл JSON (в stackblitz). Это константа, которую вы можете просто импортировать с помощью обычного импорта машинописного текста. Если вы хотите загрузить его с помощью http, вы должны удалить
export const recipesиз файлаВы должны переместить папку с файлами в папку с ресурсами проекта, чтобы файл можно было загрузить с http-сервера.
У вас недействительный файл JSON. Ответ epascarello расскажет вам, как преобразовать его в действительный JSON, но другой вариант - просто импортировать данные напрямую.
- Измените расширение файла
.jsonна.ts - В свой компонент добавьте
import {recipes} from '../../files/recipes' - У вас есть данные! Не нужно возиться с http-запросами.
Сегодня я потратил некоторое время на то, чтобы рвать волосы (новичок в написании статей в StackBlitz). и даже попробовал то, что было помечено как ответ в этой теме, но безуспешно. Во всяком случае, похоже, что ключ добавляет файл .json в папку с ресурсами. Вот ссылка, который, наконец, принес мне немедленный успех. Надеюсь, что это поможет кому-то еще сохранить прическу в такт. :-)
Меня попросили добавить фрагмент кода, но на самом деле не так много, чтобы добавить, поэтому я создал пример StackBlitz, который можно просмотреть при желании. Однако в основном все сводится к следующему: в StackBlitz, когда вы загружаете локальный файл .json, вы делаете то же самое, что обычно ... за исключением того, что вы АБСОЛЮТНО помещаете этот файл .json в папку "assets" (если у тебя его нет, создай)
this.http.get('/assets/user.json')
Я добавил пример StackBlitz здесь
пожалуйста, добавьте пример раздела для связанного кода - в противном случае этот ответ может быть проигнорирован по качеству
Хотя эта ссылка может дать ответ на вопрос, лучше включить сюда основные части ответа и предоставить ссылку для справки. Ответы, содержащие только ссылки, могут стать недействительными, если ссылка на страницу изменится. - Из обзора
Вы не можете загружать файлы с таким относительным URL. Лучше всего поместить JSON в папку / assets / и использовать его в качестве URL-адреса.