Angular http get no Objects after subscription-CodePudding

Hey I am looking for this for a few days now and cannot find a fitting solution for my problem. I have no service for the listings, thats just for simplicity and will be fixed.

I have got a api, which returns a JSON array, filled with "Krankenkasse"-Models. It's response:

[
   "{\"name\":\"ADD Aufnahmeeinrichtung\",\"kennung\":\"136580174\"}",
   "{\"name\":\"AOK Baden Württemberg\",\"kennung\":\"108018132\"}",
   "{\"name\":\"AOK Bayern\",\"kennung\":\"108310400\"}",
   "{\"name\":\"AOK Bayern Hilfsmittel\",\"kennung\":\"108616568\"}",
   "{\"name\":\"AOK Beratungs.-u.Prüfstelle SSB\",\"kennung\":\"106315003\"}"
]

Now I am trying to fit those into my Angular Model of "Krankenkasse", which is pretty much basic and simple:

export interface IKrankenkasse{
    name:string;
    kennung:string;
}

Now I am trying to make a list of my interfaces filled with the information from my api:

ngOnInit() {
  this.getKrankenkassen();
}

getKrankenkassen() {
  this.http.get<IKrankenkasse[]>(this.kkUrl)
    .subscribe(result=> this.krankenkassen = result)
}

(like i said, there is no service... for now)

The app displays the information from the list like so in my component.html:

<table>
    <tr *ngFor="let krankenkasse of krankenkassen ">
        <td>{{ krankenkasse.name }}</td>
        <td>{{ krankenkasse }}</td>
    </tr>
</table>

But my Source html output looks just like that:

<table _ngcontent-xgq-c16="">
   <tr _ngcontent-xgq-c16="">
      <td _ngcontent-xgq-c16=""></td>
      <td _ngcontent-xgq-c16="">{"name":"ADD Aufnahmeeinrichtung","kennung":"136580174"}</td>
   </tr>
   <tr _ngcontent-xgq-c16="">
      <td _ngcontent-xgq-c16=""></td>
      <td _ngcontent-xgq-c16="">{"name":"AOK Baden WÃ¼rttemberg","kennung":"108018132"}</td>
   </tr>
   <tr _ngcontent-xgq-c16="">
      <td _ngcontent-xgq-c16=""></td>
      <td _ngcontent-xgq-c16="">{"name":"AOK Bayern","kennung":"108310400"}</td>
   </tr>
</table>

CodePudding user response：

Try this

<table>
    <tr *ngFor="let krankenkasse of krankenkassen ">
        <td>{{ krankenkasse.name }}</td>
        <td>{{ krankenkasse.kennung }}</td>
    </tr>
</table>

And check in the debug what you get from api. You can get not IKrankenkasse[] because ts just wrapper above js.

CodePudding user response：

Thanks to @OMANSAK !

Instead of serializing the objects:

kk = new Krankenkasse(node.SelectSingleNode("name").InnerText, node.SelectSingleNode("kennung").InnerText)
list.Add(JSON.serialize(kk))

I just had to add the Model:

list.Add(new Krankenkasse(node.SelectSingleNode("name").InnerText, node.SelectSingleNode("kennung").InnerText));