How to parse json in angular 7?

Question

I have the following output from my node rest api :

{
    "workorder": [
        {
            "id": 1,
            "Workorderno": 110,
            "Nfno": 23,
            "Amount": 230,
            "Orderno": 34,
            "createdAt": "2019-03-02 00:19:49.495 +00:00",
            "updatedAt": "2019-03-02 12:40:36.647 +00:00"
        }
    ]
}

I want to read the output and display it in a table using angular 7 ? Could anyone guide me through as to do that? I tried making changes in my rest API, but it failed I could get the results

What stage are you at currently? Are you successfully using HttpClient in Angular to call your API and retrieve the data? — Randy Casburn
– Randy Casburn, Commented Mar 4, 2019 at 1:37

Sajeetharan · Accepted Answer · 2019-03-04 01:52:26Z

1

You need something like this using ngFor,

<table class="table table-striped">
        <thead>
            <tr>
                <th>Id</th>
                <th>Workorder No</th>
            </tr>
        </thead>
        <tbody>
           <tr *ngFor="let work of data.workorder">
            <td>{{work?.id}}</td>
            <td>{{work?.Workorderno}}</a></td>
           </tr>
        </tbody>
    </table>
</div>

and your Interface should be like this,

  export interface Workorder {
        id: number;
        Workorderno: number;
        Nfno: number;
        Amount: number;
        Orderno: number;
        createdAt: string;
        updatedAt: string;
    }

and then in your component,

  data : Workorder;
  constructor(private service: nowService) {

  }

  ngOnInit() {
    this.service.getAll().subscribe((data) => {
       this.data = data;
    })
  }
}

edited Mar 4, 2019 at 1:52

answered Mar 4, 2019 at 1:30

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

3 Comments

Atul kumar singh Over a year ago

i need the type script part as i'm getting object Object as output

Atul kumar singh Over a year ago

still getting error typeerror cannot read property of undefined ?

Sajeetharan Over a year ago

use safe navigation operator

jone · Accepted Answer · 2019-03-04 06:54:19Z

0

Try add to tr tag: ngIf="data.workorder!=null"

answered Mar 4, 2019 at 6:54

jone

13 bronze badges

Collectives™ on Stack Overflow

How to parse json in angular 7?

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related