Merging an http request result with Array

Question

I'm sorry about my confusing title but I basically have an Interface

export interface Tutor {
  name: string;
  rating: number;
  personalInfo: string;
}

And a function that Is getting a list of so-called Tutors from my back-end:

public loadTutors() {
    const url = 'http://localhost:8080/loadTutors';
    this.http.get<Tutor[]>(url).pipe(map(tutor =>
      tutor.forEach(tut => this.tutors.push(tut))))
      .subscribe();
    console.log(this.tutors);
  }

There are more fields in entity model of my back-end project then in Tutor Interface and adding a new Entity for only this specific request doesn't seem like a good scalable solution. After the function I get something like this:

Array(2)
0:
username: "Some Username"
email: null
name: null
password: "$2a$11$T44uetsjh1HxLu/ilsTiMODu.aoKLf8/zo3WPM/FUjeMXZRkpDz1S"
balance: 0
personalInfo: "Some personal Info"
rating: 0
userRoles: [{…}]
__proto__: Object
...

What would be the best practice of iterating through response fields or fitting the response to the Tutor Interface?

Thank you for your time and responses in advanced and I hope that you'll have a nice day!

You can take a look at github.com/typestack/class-transformer — Lievno
– Lievno, Commented Apr 14, 2020 at 17:00

AliF50 · Accepted Answer · 2020-04-14 17:00:38Z

1

I would just pluck what I need.

I would do:

public loadTutors() {
    const url = 'http://localhost:8080/loadTutors';
    this.http.get<Tutor[]>(url).pipe(
        // pluck name, rating, personalInfo from backend response and return it as an object
        map(tutors => tutors.map(({ name, rating, personalInfo })=> ({ name, rating, personalInfo }))),
      )
      .subscribe(tutors => {
        console.log(tutors);
        this.tutors = tutors;
        console.log(this.tutors);
      });
  }

The non ES6 way to write the map would be

map(tutor => ({ name: tutor.name, rating: tutor.rating, personalInfo: tutor.personalInfo })

answered Apr 14, 2020 at 17:00

AliF50

19.1k2 gold badges29 silver badges45 bronze badges

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

Comments

Braulio David · Accepted Answer · 2020-04-14 17:00:08Z

The interface is just a model, it doesn't mean it convert the variables into that model, you have to do it manually. Then it is better to use the map function instead of pushing into the array. I also recommend you to run the console.log inside the subscribe because the http get method is asynchronous.

public loadTutors() {
    const url = 'http://localhost:8080/loadTutors';
    this.http.get<Tutor[]>(url).pipe(
      map(tutors => {
         this.tutors = tutors.map(tut => {
           return {
             name: tut.name,
             rating: tut.rating,
             personalInfo: tut.personalInfo
           }
         })
      })
    ).subscribe(() => {
       console.log(this.tutors)
    })

}

Collectives™ on Stack Overflow

Merging an http request result with Array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related