The JSON file I am trying to load is encountering a parsing failure over HTTP

Question

The JSON file I am trying to load is encountering a parsing failure over HTTP

When trying to load valid json data, I encountered the following error message:

Error: Http failure during parsing for ... .json

https://i.sstatic.net/hG4uQ.jpg

recipe.component.ts

 url = '../../files/recipes.json';
  recipes;

  constructor(private fileService: FileLoaderService) {}

  ngOnInit() {
    this.fileService.getData(this.url).subscribe(res => console.log(res));
  }

file-loader.service.ts

constructor(private http: HttpClient) { }

  getData(url: string): Observable<any> {
    return this.http.get(url);
  }

javascript json angular typescript

Answer 1

Answer №1

What you currently possess is not a valid JSON file. Instead of converting it to valid JSON as instructed by epascarello, an alternative approach would be to directly import the data.

Rename the file extension from .json to .ts

Add

import {recipes} from '../../files/recipes'

to your component

Voila! Your data is now accessible without the need for tedious http requests.

Answer 2

What you currently possess is not a valid JSON file. Instead of converting it to valid JSON as instructed by epascarello, an alternative approach would be to directly import the data.

Rename the file extension from .json to .ts

Add

import {recipes} from '../../files/recipes'

to your component

Voila! Your data is now accessible without the need for tedious http requests.

Answer 3

Answer №2

When including the export statement like below in a JSON document:

export const recipes = [
  {...}
]

it causes the file to no longer be considered a valid JSON. To correct this, simply remove the export statement.

A JSON file should only contain the JSON data itself, without any additional export statements.

[
  {...}
]

Answer 4

When including the export statement like below in a JSON document:

export const recipes = [
  {...}
]

it causes the file to no longer be considered a valid JSON. To correct this, simply remove the export statement.

A JSON file should only contain the JSON data itself, without any additional export statements.

[
  {...}
]

Answer 5

Answer №3

Here are a couple of corrections and missing steps:

The JSON file in the stackblitz is not valid. It should be a constant that can be imported using normal typescript import. If you want to load it via http, remove export const recipes from the file.
Move the files folder to the assets folder of your project so that the file can be loaded from the http server.

Answer 6

Here are a couple of corrections and missing steps:

The JSON file in the stackblitz is not valid. It should be a constant that can be imported using normal typescript import. If you want to load it via http, remove export const recipes from the file.
Move the files folder to the assets folder of your project so that the file can be loaded from the http server.

Answer 7

Answer №4

Today, I spent quite some time struggling with writing in StackBlitz for the first time. Despite following the solution provided in a thread, I had no success. However, it turned out that the key was simply adding the .json file to the assets folder. If you're facing a similar issue, here's the link that helped me achieve immediate success. Hopefully, this tip will save someone else from experiencing the frustration I went through.

Although I've been requested to provide a code snippet, there isn't much to include. Therefore, I have created a StackBlitz example that can be accessed if needed. The essence of the solution lies in this: when loading a local .json file in StackBlitz, you follow the same process as you normally would...but ensure that you place the .json file in the "assets" folder (and create one if it doesn't exist).

this.http.get('/assets/user.json')

You can find an example on StackBlitz here

Answer 8

Today, I spent quite some time struggling with writing in StackBlitz for the first time. Despite following the solution provided in a thread, I had no success. However, it turned out that the key was simply adding the .json file to the assets folder. If you're facing a similar issue, here's the link that helped me achieve immediate success. Hopefully, this tip will save someone else from experiencing the frustration I went through.

Although I've been requested to provide a code snippet, there isn't much to include. Therefore, I have created a StackBlitz example that can be accessed if needed. The essence of the solution lies in this: when loading a local .json file in StackBlitz, you follow the same process as you normally would...but ensure that you place the .json file in the "assets" folder (and create one if it doesn't exist).

this.http.get('/assets/user.json')

You can find an example on StackBlitz here

The JSON file I am trying to load is encountering a parsing failure over HTTP

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Using addClass and removeClass with transition does not yield the desired result

Trigger a drop-down list in React when typing a specific character, like {{ or @, in an input field

Remove rows that have values within a specific range

Updating multiple subdocuments with Mongoose

What could be causing the type errors I am encountering while trying to resolve this Promise within a generic function?

Leveraging TypeScript for defining intricate tree manipulation guidelines

Steps to Turn Off Angular 2 Material Input Field

Tips on setting up a self-start event or alert in ASP.NET

Multiple jQuery click event executions from a single click

Guide to presenting fields on a distinct line or section in Angular 7 forms

Blur images on parent div when hovering using javascript

Adding an active class to a link tag depending on the current URL and custom Vanity URLs - here's how!

Trapped in the dilemma of encountering the error message "Anticipated an assignment or function: no-unused expressions"

How to apply styles to a child component using CSS modules in a parent component

Troubleshoot: Unable to utilize mapActions with Vuex modules

What is the best way to incorporate LaTeX equations into an HTML document?

Are your JavaScript scripts causing conflicts?

`Finding and accessing the attributes and object of a React child component from its parent component`

Combining multiple ODATA responses to create a unified JSON message within Azure Logic Apps

Can data be fetched from a local port using either Javascript or ASP.NET?