Troubleshooting a Missing Call Display Issue in Angular2 API

Question

Troubleshooting a Missing Call Display Issue in Angular2 API

Greetings, I am a new web developer and I have been tasked with creating a prototype Inventory Page using Angular2. Please bear with me as my code may not be perfect.

In the snippet below, you'll notice that we are calling our base back-end API ('?') from the EXAMPLEapi.service page. This call is then passed to an ngOnInit function within EXAMPLEapi.component to initialize the inventory on the page.

Once the initial inventory is loaded, users should be able to select various filtering values such as Min/Max Years, Mileage, colors, etc. These values are captured by the form in EXAMPLEapi.component.html and sent to the refreshInv() function in EXAMPLEapi.component. The function converts these values into parameters using URLSearchParams before making another call to the API.

The structure of the API allows us to simply append 'min_price=' at the end of the base URL to reflect changes in the inventory call.

However, despite receiving a successful status 200 network response when submitting the filters, the inventory does not load back onto the page. It remains blank for some reason.

EXAMPLEAPI.service.ts

// Code from EXAMPLEAPI.service.ts is provided here

EXAMPLE.component.ts

 // Code from EXAMPLE.component.ts is shown here

angular typescript rxjs

Answer 1

Answer №1

To begin with, if you are looking for guidance on setting up an angular2 plnkr using unpkg, you can find an example here.

In regards to your code, the function refreshInv currently returns a subscription, which serves no purpose other than to unsubscribe.

I would like to propose an alternative approach that has proven effective for me and will streamline your code. The data flow in your scenario is: 'query' -> 'request' -> 'display'. In rxjs, this can be easily implemented as follows:

let items$ = jsonParams$
  .map(urlParamsMapper)
  .switchMap(urlParams => http.get(baseUrl, urlParams))
  .map(response => response.json().data);

Here, urlParamsMapper takes a JSON-based query and converts it to URLSearchParams.

The jsonParams$ observable (in this case a Subject) can be updated with the relevant query details as needed:

let jsonParams$: Subject<any> = new BehaviorSubject({
  min_price: '',
  max_price: '',
  ...
  ext_color: ''
});

Each time the params are updated, the new JSON is constructed and then:

jsonParams$.next(currentParams);

Note: In rxjs 4, use onNext instead of next.

This will trigger the entire chain for you.

The final step of binding it to your template will look something like this:

<my-item-renderer *ngFor="let item; of items$ | async;" [item]="item"></my-item>

Note: Use async to bind to an observer.

If you wish to maintain your service architecture, keeping the HTTP call within a service, you can organize it as follows:

In the service:

createItemsLoader(jsonParams$: Observable<any>): Observable<Array<any>> {
  return jsonParams$.map(urlParamsMapper)
    .switchMap(urlParams => http.get(baseUrl, urlParams))
    .map(response => response.json().data);
}

And in your component:

let jsonParams$: Subject<any> = new BehaviorSubject({min_price: '' ...});
let items$ = ItemsService.createItemsLoader(jsonParams$);

refreshInv() {
  .... let jsonParams: any = construct json params ....
  this.jsonParams$.next(jsonParams);
}

Reactive programming's beauty lies in building your pipelines effectively so that sending new data down the right pipe automatically delivers it to whoever is listening at the other end. Unlike the procedural mindset shown in your initial code snippet.

Answer 2

To begin with, if you are looking for guidance on setting up an angular2 plnkr using unpkg, you can find an example here.

In regards to your code, the function refreshInv currently returns a subscription, which serves no purpose other than to unsubscribe.

I would like to propose an alternative approach that has proven effective for me and will streamline your code. The data flow in your scenario is: 'query' -> 'request' -> 'display'. In rxjs, this can be easily implemented as follows:

let items$ = jsonParams$
  .map(urlParamsMapper)
  .switchMap(urlParams => http.get(baseUrl, urlParams))
  .map(response => response.json().data);

Here, urlParamsMapper takes a JSON-based query and converts it to URLSearchParams.

The jsonParams$ observable (in this case a Subject) can be updated with the relevant query details as needed:

let jsonParams$: Subject<any> = new BehaviorSubject({
  min_price: '',
  max_price: '',
  ...
  ext_color: ''
});

Each time the params are updated, the new JSON is constructed and then:

jsonParams$.next(currentParams);

Note: In rxjs 4, use onNext instead of next.

This will trigger the entire chain for you.

The final step of binding it to your template will look something like this:

<my-item-renderer *ngFor="let item; of items$ | async;" [item]="item"></my-item>

Note: Use async to bind to an observer.

If you wish to maintain your service architecture, keeping the HTTP call within a service, you can organize it as follows:

In the service:

createItemsLoader(jsonParams$: Observable<any>): Observable<Array<any>> {
  return jsonParams$.map(urlParamsMapper)
    .switchMap(urlParams => http.get(baseUrl, urlParams))
    .map(response => response.json().data);
}

And in your component:

let jsonParams$: Subject<any> = new BehaviorSubject({min_price: '' ...});
let items$ = ItemsService.createItemsLoader(jsonParams$);

refreshInv() {
  .... let jsonParams: any = construct json params ....
  this.jsonParams$.next(jsonParams);
}

Reactive programming's beauty lies in building your pipelines effectively so that sending new data down the right pipe automatically delivers it to whoever is listening at the other end. Unlike the procedural mindset shown in your initial code snippet.

Troubleshooting a Missing Call Display Issue in Angular2 API

Answer №1

Similar questions

Would it be frowned upon to rely on store instead of data binding for inter-component communication when accessing my data?

The issue arises when attempting to apply a class binding to the mat-card element, as the mat-card class

Should the method of creating a Dropdown with Angular be considered a poor practice?

AngularMap with mapping as the value

Passing a click event from a route-outlet to app.component in Angular 2

What is the reason behind RematchDispatch returning a `never` type when a reducer and an effect share the same name?

Ways to create a method that can be overridden

Running pre-commit eslint autofix but encountering errors that do not exist

Error: Unable to access properties of null (specifically 'writeValue')

Having trouble with the npm Fluid Player installation

Is there a way to retrieve the headers from the error callback when using the subscribe function?

Utilize a dynamically defined union type to create a versatile callback function

Output Scalable Vector Graphics (SVG) content on a webpage

angular 6 httpclient include login information in the URL

limitation on pairings of two generic types

Merge various observables into a unified RxJS stream

What is the best way to implement a dynamic templateUrl for an Angular 2 Component?

Include module A in module B, even though module A has already included module B's Angular

Discovering class methods in typescript

What is the purpose of the .Class method in ng.core.component within ES5?