Handling JSON data with Reactive Extensions in JavaScript

Question

Handling JSON data with Reactive Extensions in JavaScript

Hey everyone, I'm a beginner in Angular and RxJS coming from a background in VueJS. I've been struggling to grasp the inner workings of RxJS and would really benefit from some guidance from more experienced individuals regarding my current issue.

What I aim to achieve: I am using the nomics API(see link below) to fetch data which is returned as an array of objects. While I know how to easily display all objects on my component, I'm facing a challenge when it comes to selecting a specific object based on one of its properties. For instance, "loop through each object in the array until I find the object where object.Currency == 'BTC' ". Currently, I am able to retrieve all data and display it successfully. Can anyone show me how to filter the data based on a condition related to one of the objects?

API Link:

My code:

getDashboard() {
return this.http.get(`${this.apiUrl}/dashboard?key=${this.apiKey}`).pipe(
  map(result => {
    console.log(result);
    // Here I need help to extract the object with a specific property in Object.Currency
    // For example, iterate through objects until currentObject.Currency== 'Some string'
  })
)

}

angular typescript rxjs

Answer 1

Answer №1

If you have an array of objects, one way to filter them is by using the filter() array operator.

 this.http.get(`${this.apiUrl}/dashboard?key=${this.apiKey}`).pipe(
      tap(console.log),
      map(arr=>arr.filter(obj => obj.Currency && obj.Currency == 'BTC' ))
    )

Alternatively, you can also achieve the same result with the following approach:

 this.http.get(`${this.apiUrl}/dashboard?key=${this.apiKey}`).pipe(
      tap(console.log),
      switchMap(arr=>from(arr)),
      filter(obj => obj.Currency && obj.Currency == 'BTC' ),
      toArray()
    )

Answer 2

If you have an array of objects, one way to filter them is by using the filter() array operator.

 this.http.get(`${this.apiUrl}/dashboard?key=${this.apiKey}`).pipe(
      tap(console.log),
      map(arr=>arr.filter(obj => obj.Currency && obj.Currency == 'BTC' ))
    )

Alternatively, you can also achieve the same result with the following approach:

 this.http.get(`${this.apiUrl}/dashboard?key=${this.apiKey}`).pipe(
      tap(console.log),
      switchMap(arr=>from(arr)),
      filter(obj => obj.Currency && obj.Currency == 'BTC' ),
      toArray()
    )

Answer 3

Answer №2

Make sure to add the filter to your response in the following way:

  fetchResults() {
    return this.http.get(`${this.apiUrl}/results?key=${this.apiKey}`).pipe(
      map(response => response.pipe(filter(item => item.Status == 'Some status')))
    )
  }

Consider applying this filtering logic in your component where you handle the response data, rather than in the service that sends the API request.

Answer 4

Make sure to add the filter to your response in the following way:

  fetchResults() {
    return this.http.get(`${this.apiUrl}/results?key=${this.apiKey}`).pipe(
      map(response => response.pipe(filter(item => item.Status == 'Some status')))
    )
  }

Consider applying this filtering logic in your component where you handle the response data, rather than in the service that sends the API request.

Handling JSON data with Reactive Extensions in JavaScript

Answer №1

Answer №2

Similar questions

Angular15: How can we properly provide support for legacy browsers?

Nebular specializes in crafting personalized registration solutions

Utilizing Input Value from Parent Component in Angular TypeScript File: A Guide

I keep encountering a syntax error every time I attempt to run the yarn start command

Is it possible to globally define a namespace in Typescript?

TypeScript purity - "The variable exports is not defined"

Getter and Setter Implementation in Typescript without Using Classes

learning how to transfer a value between two different components in React

Top method for allowing non-component functions to update Redux state without the need to pass store.dispatch() as a parameter

Encountering an error in Angular 8 with the plugin: Unhandled ReferenceError for SystemJS

Navigating with firebase authentication and angular routing

Setting the default value for ngModel does not receive any information from the model

Exploring the visitor design pattern with numerical enumerated types

Transform nested properties of an object into a new data type

Issue with Vue plugin syntax causing component not to load

Issue: React child components cannot be objects (received: object with keys)

The name 'BrowseAnimationModule' cannot be located

The type 'undefined' cannot be assigned to type 'Element or null'

Custom type checker that validates whether all properties of a generic object are not null or undefined

What are the best practices for styling a component in Fluent UI when using React and TypeScript?