How to populate angular table with data from RestAPI database?

Question

Im trying to populate an angular table with data received from a restapi database but i cannot get it to populate at all. I can send the data to the console with console.log but i need to populate a table which i am unsure of how to do, any help is appreciated.

partycomponent.html

<tr *ngFor="let parties of partyArray">
    <td>{{PARTY.MNEMONIC}}</td>
    <td>{{PARTYNAME}}</td>
    <td>{{PARTYCOLOUR}}</td>
 </tr>

parties.component.ts

 parties = [];
  constructor(httpClient: HttpClient) { 
    httpClient.get('http://localhost:3000/parties')
    .subscribe(obj => {
      console.log(obj);
      this.parties = obj as any[];
    })
  }

I can put the data into the console from the sql link above but cannot put it on screen inside the table I have made.

My sql works correctly and the link is correct as i can post the data to the console but just cannot seem to get it posting on screen. Any help is appreciated

anonymous · Accepted Answer · 2020-04-22 21:19:09Z

1

<tr *ngFor="let party of parties">
    <td>{{party.PARTY_MNEMONIC}}</td>
    <td>{{party.PARTYNAME}}</td>
    <td>{{party.PARTYCOLOUR}}</td>
 </tr>

You are binding it wrongly.

edited Apr 22, 2020 at 21:19

answered Apr 22, 2020 at 21:11

anonymous

1,7312 gold badges23 silver badges45 bronze badges

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

5 Comments

Patrick mc Over a year ago

Ive made the changes but It is still not populating the table, is the let parties of partyArray correct im new to this language so im unsure

anonymous Over a year ago

post here the response you received.

Patrick mc Over a year ago

0: {PARTY_MNEMONIC: "AON", PARTYNAME: "Aontú", PARTYCOLOUR: "4650b9"} 1: {PARTY_MNEMONIC: "FF", PARTYNAME: "Fianna Fáil", PARTYCOLOUR: "14aa55"} 2: {PARTY_MNEMONIC: "FG", PARTYNAME: "Fine Gael", PARTYCOLOUR: "00a0e1"} 3: {PARTY_MNEMONIC: "GP", PARTYNAME: "Green Party", PARTYCOLOUR: "91b905"} 4: {PARTY_MNEMONIC: "IND", PARTYNAME: "Independent", PARTYCOLOUR: "dc9b14"} 5: {PARTY_MNEMONIC: "LAB", PARTYNAME: "Labour", PARTYCOLOUR: "d7323c"}

Patrick mc Over a year ago

i receive that in the console but its not populating within the table, the sql works but im messing something up to fill the table just

anonymous Over a year ago

Let us continue this discussion in chat.

Collectives™ on Stack Overflow

How to populate angular table with data from RestAPI database?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related