Angular - how to pass received JSON in to a html table?

Question

I have an Angular 6 project which I receive a JSON object like the following: json array

And now I want to inject/pass this on a html table. Here is my code:

Interface

interface Ilivelog {
  instID: string;
  procID: string;
  threadNum: string;
  status: string;
}

The object

dataAgent: Ilivelog;

Method

onGetAgent() {
  this.backend.getAgentStatus().subscribe(
    (response: Response) => {
      this.dataAgent = response.json();
      console.log("Arrey Agent: " + this.dataAgent);
    },
    (error) => {
      console.log(error)
    }
  )
}

How I get the data

getAgentStatus() {
  return this.http.get('http://localhost:8081/rms_agent/status');
}

How can I pass the this json in to a HTML table?

SiddAjmera · Accepted Answer · 2018-11-06 14:01:38Z

2

Try this in your Component Template:

<table border="1">
  <thead>
    <td>instID</td>
    <td>procID</td>
    <td>threadNum</td>
    <td>status</td>
  </thead>
  <tbody>
    <tr *ngFor="let item of dataAgent">
      <td>{{item.instID}}</td>
      <td>{{item.procID}}</td>
      <td>{{item.threadNum}}</td>
      <td>{{item.status}}</td>
    </tr>
  </tbody>
</table>

Here's a Sample StackBlitz for your ref.

edited Nov 6, 2018 at 14:01

answered Nov 6, 2018 at 13:40

SiddAjmera

39.6k7 gold badges77 silver badges113 bronze badges

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

12 Comments

Kiril1512 Over a year ago

didn't help, I got only the thead. I belive that this can't recognise the item.body.

Kiril1512 Over a year ago

it says: Arrey Agent: {"instID":"2018#11#06","procID":1161005,"threadNum":0,"status":9},{"instID":"2018#11#06","procID":1161030,"threadNum":0,"status":9},{"instID":"2018#11#06","procID":1161020,"threadNum":0,"status":9}

Kiril1512 Over a year ago

can you help me? There is no result displayed. And the log I have: Arrey Agent: {"instID":"2018#11#06","procID":1161010,"threadNum":0,"status":9}

Kiril1512 Over a year ago

can it be that I need to use httpClientModule on the back end or something?

Kiril1512 Over a year ago

import { Http } from "@angular/http"; constructor(private http: Http) { }

|

Rúben · Accepted Answer · 2019-03-22 17:57:44Z

1

Check first if the JSON is valid in a validator.

answered Mar 22, 2019 at 17:57

Rúben

262 bronze badges

1 Comment

Kiril1512 Over a year ago

Yes, this is was the main problem, my backend team was sending me a string not a json...

NoLogig · Accepted Answer · 2018-11-06 16:37:26Z

-2

In your component.ts:

results$: Observable<Ilivelog[]>;
ngOnInit() {
   this.result$ = this.backend.getAgentStatus().pipe(
        map(res => res.json())
   );
}

in your view.html

<table>
    <tr *ngFor="let log of (results$ | async)">
       <td>log.instID</td>
       <td>log.procID</td>
       <td>log.threadNum</td>
       <td>log.status</td>
    </tr>
</table>

edited Nov 6, 2018 at 16:37

NoLogig

1167 bronze badges

answered Nov 6, 2018 at 13:44

Antoine Clavijo

1,3052 gold badges11 silver badges19 bronze badges

4 Comments

Kiril1512 Over a year ago

Uncaught Error: Template parse errors: Can't bind to 'ngForIn' since it isn't a known property of 'tr'. ("

Kiril1512 Over a year ago

and then it shows only: log.instID log.procID log.threadNum log.status

mast3rd3mon Over a year ago

the .pipe(map(res => res.json())); should be after the this.http.get() not instead of a .subscribe()

Antoine Clavijo Over a year ago

If you see getAgentStatus() return an observable. But if you use HttpClient module you don't need to do res.json().

Collectives™ on Stack Overflow

Angular - how to pass received JSON in to a html table?

3 Answers 3

12 Comments

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

12 Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related