CODEWITHSUNDEEP
angularionic-frameworkangular-httpclient
JaChNo
JaChNo

Reputation: 1563

http subscribe not mapping data to model

caveat: I am brand new to angular so I might have misunderstood how it is supposed to work.

I have an endpoint that I am hitting to get some data. I have created a model and I thought I could map the response straight into an array of models.

but it looks like it is ignoring the model completely I get my data back but it is the whole JSON data response. Not just the matching field from the model.

This is my service code

getFaults() {
   return this.http.get<Fault[]>('<SITE>/api/faults')
}

This is my model

export interface Fault {
description: string
  }

and this is the code I am calling in the page.ts

export class Tab1Page {
  constructor(public faultsService: FaultsService) {}

  faults: Fault[];

  getFaults() {
    console.log("click");
    this.faultsService
      .getFaults()
      .subscribe((data: Fault[]) => console.log(data));
  }
}

the output to console looks like this, I was expecting it would be an array of fault models, with just description mapped. Am I missing something?

[1]

Upvotes: 0

Views: 1090

Answers (3)

Vadim
Vadim

Reputation: 3439

There's nothing wrong with the code or behaviour. It does what's expected. The model is just typescript interface. What it does here is type-checking only:

getFaults() {
  return this.http.get<Fault[]>('<SITE>/api/faults')
}

To get particular property description from items of array data, you need to loop over it and get these properties:

getFaults() {
  console.log("click");
  this.faultsService
    .getFaults()
    .subscribe((data: Fault[]) => {
      const descriptions = data.map(obj => {
        return { description: obj.description }
      });
      console.log(descriptions);
    });
}

Upvotes: 0

Ritesh Waghela
Ritesh Waghela

Reputation: 3727

When you are calling the API, you are getting all the data. What you need to do is just use that data that you need, in this case description. RxJS provides the map operator that you can use to transform the data in a format that you want:

Here is how you can use the RxJS map operator to transform your data: 

  getFaults() {
        console.log("click");
        this.faultsService
          .getFaults().map((data: any) => data.description)
          .subscribe((data: Fault[]) => console.log(data));
      }

Upvotes: 2

VascoCC
VascoCC

Reputation: 500

When you say that 

.subscribe((data: Fault[]) => console.log(data));

You're saying that data is of Fault[] type, this will be checked only at compilation time, so you'll get an error if you try to do data.status inside subscribe() for example. At run time data will be printed as is.

If you want to log only Fault.description you'll have to iterate through you're array.

getFaults() {
  console.log("click");
  this.faultsService
    .getFaults()
    .subscribe(data => {
       let faults = Fault[];
       data.forEach(object => {
          faults.push({description: object.description})
       });
       console.log(faults);
    });
}

Upvotes: 1

Related Questions