Mapping http response to typeScript object

Question

I am trying to convert API response (json string array) to typescript object but not able to achieve . I tried to add map function but not able to use it properly.

Sample API response is ["Paris","London","New York"]

my City class is like this

export class City { Name:string; 
                    isAvailable: boolean;
                  }

My function

public getCities(queryId: string) : Observable<City[]> {
              const url = apiUrl;

              const response = this.http.get<string[]>(url)
                                   .pipe(catchError(this.handleError));
             //how can i add map method here to convert String to City object?

              return response;

         }

I expect output like

[
  {Name:"Paris",isAvailable:true},
  {Name:"London",isAvailable:true}, 
  {Name:"New York",isAvailable:true}
]

.pipe(map(response => response.map(name => { Name: name, isAvailable: true } as City))) — Benny Halperin
– Benny Halperin, Commented Apr 24, 2020 at 18:51

wentjun · Accepted Answer · 2020-04-24 18:53:38Z

3

If you wish to handle this within your RxJS pipeline, this is what you can do. We use the RxJS map operator to transform the response into an array of City objects.

public getCities(queryId: string) : Observable<City[]> {
  const url = apiUrl;

  return this.http.get<string[]>(url)                                
    .pipe(
      map((res) = {
        return res.map(name => ({
          Name: name,
          isAvailable: true,
        });
      }),
      catchError(this.handleError));   
}

answered Apr 24, 2020 at 18:53

wentjun

42.8k10 gold badges108 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alex Wayne · Accepted Answer · 2020-04-24 18:51:17Z

2

First, you'll need a way to actually put those values in your class. Let's just accept those in the constructor.

export class City {
  Name: string; 
  isAvailable: boolean;

  constructor(name: string, isAvailable: boolean) {
    this.Name = name
    this.isAvailable = isAvailable
  }
}

Now, assuming response is your JSON string, then first you want to parse the JSON string and cast it to the format you expect (which is string[]).

Then map over it to create what you need.

const cities: string[] = JSON.parse(response)
const cityObjects = cities.map(name => new City(name, true))

answered Apr 24, 2020 at 18:51

Alex Wayne

188k52 gold badges328 silver badges363 bronze badges

Comments

Mattia S. · Accepted Answer · 2021-11-03 11:03:45Z

0

You can map data automatically with a lightweight package called tapi.js

npm i -D tapi.js

And then you can map the object automatically in a lot of ways, since you are mapping JSON data you can do so as such

http.YOUR_REQUEST
    .as(YourClass)
    .[then/pipe/whatever](typedObject => { ... })

You can read the docs for more info.

answered Nov 3, 2021 at 11:03

Mattia S.

6338 silver badges11 bronze badges

Collectives™ on Stack Overflow

Mapping http response to typeScript object

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related