There was an error parsing the data from the specified URL (http://localhost:8000/src/client/assets/data.json

Question

There was an error parsing the data from the specified URL (http://localhost:8000/src/client/assets/data.json

Hey there, I'm a newcomer to Angular and I'm having trouble reading a JSON array from a file. Every time I try, it gives me a "failed to parse" error. Can someone please provide some guidance?

Here is my folder structure:

src

--assets
    ---app
      -----opportunities
            ------opportunities.component.ts
--data.json

The data in my data.json file looks like this:

[  
    {
     "Account name": "155874744",
     "Oppty owner": "Sony Europe Ltd.",
     "Product/s": "June 10, 2015",
     "Domestic/Mow": "55434992111033",
     "ASAP solution status": "Aasd",
     "Price scenario status": "$253.00"         
    },
    {
     "Account name": "155874744",
     "Oppty owner": "Sony Europe Ltd.",
     "Product/s": "June 10, 2015",
     "Domestic/Mow": "55434992111033",
     "ASAP solution status": "sds",
     "Price scenario status": "$253.00"        
    }     
]

Below is the code in opportunities.component.ts:

 constructor(private httpservice:HttpClient){}
  public  opptyData:any[];
    ngOnInit()
    {                 
      this.httpservice.get('src/client/assetsdata.json').subscribe(data=>{
                this.opptyData = data as string[];
                console.log(this.opptyData[1]);
            },
            (err:HttpErrorResponse)=>{
                console.log(err.message);
            }
            );
    }

I'm really struggling to figure out what the issue is. Any help would be greatly appreciated!

javascript json angular typescript angular-httpclient

Answer 1

Answer №1

For the desired URL, you can use the following code snippet:

this.httpservice.get('./data.json').subscribe(data=>{
     this.opptyData = data as string[];
     console.log(this.opptyData[1]);
}

Answer 2

For the desired URL, you can use the following code snippet:

this.httpservice.get('./data.json').subscribe(data=>{
     this.opptyData = data as string[];
     console.log(this.opptyData[1]);
}

Answer 3

Answer №2

If you're looking to structure your front-end using dummy JSON, a recommended option is to utilize this website

Simply paste your JSON, select your options, and click on Generate my HTTP response. This will provide you with a service link that can be temporarily used in your code. Alternatively, you can also explore the method suggested by Sajeetharan.

Best of luck!

Answer 4

If you're looking to structure your front-end using dummy JSON, a recommended option is to utilize this website

Simply paste your JSON, select your options, and click on Generate my HTTP response. This will provide you with a service link that can be temporarily used in your code. Alternatively, you can also explore the method suggested by Sajeetharan.

Best of luck!

Answer 5

Answer №3

Save information in the assets directory:

located at src/assets/data.json

Directory Layout:

src
   -assets
      -data.json

access the data like this: // (assets/data.json)

constructor(private httpservice:HttpClient){}
  public opptyData:any[];
    ngOnInit()
    {

            this.httpservice.get('assets/data.json').subscribe(data=>{
                    this.opptyData = data as string[];
                    console.log(this.opptyData[1]);

            },
            (err:HttpErrorResponse)=>{
                console.log(err.message);
            }

            );

    }

OR -------------------------------------------------------------------------------------------------------------------------------

Directory Layout:

src
   -assets
     -client
       -data.json

access the data like this: // (assets/client/data.json)

constructor(private httpservice:HttpClient){}
  public opptyData:any[];
    ngOnInit()
    {

            this.httpservice.get('assets/client/data.json').subscribe(data=>{
                    this.opptyData = data as string[];
                    console.log(this.opptyData[1]);

            },
            (err:HttpErrorResponse)=>{
                console.log(err.message);
            }

            );

    }

Answer 6

Save information in the assets directory:

located at src/assets/data.json

Directory Layout:

src
   -assets
      -data.json

access the data like this: // (assets/data.json)

constructor(private httpservice:HttpClient){}
  public opptyData:any[];
    ngOnInit()
    {

            this.httpservice.get('assets/data.json').subscribe(data=>{
                    this.opptyData = data as string[];
                    console.log(this.opptyData[1]);

            },
            (err:HttpErrorResponse)=>{
                console.log(err.message);
            }

            );

    }

OR -------------------------------------------------------------------------------------------------------------------------------

Directory Layout:

src
   -assets
     -client
       -data.json

access the data like this: // (assets/client/data.json)

constructor(private httpservice:HttpClient){}
  public opptyData:any[];
    ngOnInit()
    {

            this.httpservice.get('assets/client/data.json').subscribe(data=>{
                    this.opptyData = data as string[];
                    console.log(this.opptyData[1]);

            },
            (err:HttpErrorResponse)=>{
                console.log(err.message);
            }

            );

    }

There was an error parsing the data from the specified URL (http://localhost:8000/src/client/assets/data.json

Answer №1

Answer №2

Answer №3

Similar questions

Having trouble passing parameters to Next JS when using the Courtain.js library

Creating dynamic select boxes in Django Admin using jQuery

When working with AngularJS, you can enhance your application by implementing a global AJAX error handler if one has

The ngFor directive in Angular2 consistently collapses the identical <tr> element

I am receiving a success message from webpack indicating that the compilation was successful, but I am encountering a blank page in the

Best practices for managing storage objects that contain references to other storage objects?

Struggling to eliminate nesting in a JSON array using PHP

The click() function in jQuery executing only once inside a "for" loop

The 'fullDocument' property is not present in the 'ChangeStreamDropDocument' type

"Select2 dropdown search bar vanishing act: The hunt for results comes up empty

Error: Unable to bind 'datasets' as it is not recognized as a valid property of 'base-chart' in ng2-charts

Display the results from the API in a div using Vue.js

What steps should I take to create code that can generate a JWT token for user authentication and authorization?

Even after trying to hide the legend in a Radar Chart using the configuration option `legend: {display: false}` in chart.js, the legend

What is the alternative method for reading an HTML text file in JavaScript without utilizing the input type file?

Defining variables within a jQuery function

Events related to key press timing in HTML 5 canvas

Building a web proxy with node.js and express

The iPad screen displays the image in a rotated position while it remains

What is the best way to convert exponential values to decimals when parsing JSON data?