Issues with Angular2 http.get() returning 404 errors consistently

Question

Issues with Angular2 http.get() returning 404 errors consistently

I'm encountering an issue while attempting to load dummy JSON data from a file using angular2 http.get method. It appears that the method is unable to retrieve the data, consistently returning a 404 status code for resource not available. Below is the code snippet I am using:

const obs: Observable<any> = this.http.get('http://localhost:4200/assets/mock-json/cashback.json')
    .map((res: Response) => {
      console.log('***********',res.json());
      res.json(); })
    .do((res) => this.loadedCB = res);
 if (this.loadedCB) {
     return Observable.of(this.loadedCB);
 }

Interestingly, when I manually enter the URL http://localhost:4200/assets/mock-json/cashback.json in my browser, it successfully retrieves the data. It's puzzling why it doesn't work with http.get().

json angular http typescript observable

Answer 1

Answer №1

If you're encountering this issue, it could be due to not subscribing to the observable, preventing it from executing and therefore not receiving any results (you can verify this in the network tab of a web inspector).

To resolve this, make sure to subscribe to the observable to initiate its execution.

Here is an example:

export class AppComponent implements OnInit {
  loadedCB: any;

  constructor(public http: Http) {
  }

  ngOnInit() {
    this.tryAndLoad();
  }

  tryAndLoad() {
    this.load().subscribe((res: any) => {
      this.loadedCB = res;
      if (this.loadedCB) {
        console.log(this.loadedCB);
        return Observable.of(this.loadedCB);
      }
    });
  }

  load() {
    return this.http.get('http://localhost:4200/assets/mock-json/cashback.json')
      .map((res: Response) => {
        console.log('***********', res);
        return res.json();
      })
  }
}

This code snippet properly returns a result that you can manipulate as needed. Since an observable is returned, additional actions can be performed (though not demonstrated in this demo).

https://i.sstatic.net/BGTWV.png

https://i.sstatic.net/4wEJM.png

Don't forget to add import 'rxjs/Rx'; at the beginning of your page to avoid any errors related to this.http.get(...).map

Answer 2

If you're encountering this issue, it could be due to not subscribing to the observable, preventing it from executing and therefore not receiving any results (you can verify this in the network tab of a web inspector).

To resolve this, make sure to subscribe to the observable to initiate its execution.

Here is an example:

export class AppComponent implements OnInit {
  loadedCB: any;

  constructor(public http: Http) {
  }

  ngOnInit() {
    this.tryAndLoad();
  }

  tryAndLoad() {
    this.load().subscribe((res: any) => {
      this.loadedCB = res;
      if (this.loadedCB) {
        console.log(this.loadedCB);
        return Observable.of(this.loadedCB);
      }
    });
  }

  load() {
    return this.http.get('http://localhost:4200/assets/mock-json/cashback.json')
      .map((res: Response) => {
        console.log('***********', res);
        return res.json();
      })
  }
}

This code snippet properly returns a result that you can manipulate as needed. Since an observable is returned, additional actions can be performed (though not demonstrated in this demo).

https://i.sstatic.net/BGTWV.png

https://i.sstatic.net/4wEJM.png

Don't forget to add import 'rxjs/Rx'; at the beginning of your page to avoid any errors related to this.http.get(...).map

Issues with Angular2 http.get() returning 404 errors consistently

Answer №1

Similar questions

Is it more efficient for the component to retrieve data from storage or to be provided with the data

Unleashing the power of TypeScript in combination with svelte and d3

Having trouble reading properties of undefined (specifically 'listen') during testing with Jest, Supertest, Express, Typescript

Unable to locate a compatible version for caniuse-lite with the specified range of ^1.0.30001349

Guide for making a JSON request to a Ruby on Rails application

Tips for deserializing SQLAlchemy JSON data into Decimal values with Flask-SQLAlchemy

Expanding declaration files in TypeScript to include third-party libraries

What is the correct way to invoke a function from an external JavaScript file using TypeScript?

The $http patch request is failing to transmit data to the server

Should an HTML canvas in Angular be classified as a Component or a Service?

What is the best way to convert a BigDecimal to a decimal format within a JSON response when using JAX

Using Angular's UI Typeahead feature in conjunction with the `$http.get`

What is the best way to showcase an element within an array that matches a particular value or character?

Having trouble getting useFieldArray to work with Material UI Select component

Combining GroupBy and OrderBy Features in Ionic2 using Angular2

Angular 2 and TypeScript: Mastering Checkbox Data Binding

Ionic retrieves a filtered array of JSON data

PHP Code: How to Retrieve JSON from a Remote URL

Click to load additional data until the list has reached its full length

Integrate a dictionary into a JSON object using Python Flask