display json data in a html table

Question

Basically what i have done is to insert some data to the database via the python server- werkzeug. and another function to retreive those data from database. everything works fine with the result shown in the console of the browser. now how to print those result which is in json format in a html table. my code is very simple it does not contain any ngAapp or ngController.

import { Component } from '@angular/core';
import {Http, Response, Headers} from '@angular/http';

@Component({
    selector: 'app-meta',
    templateUrl: './meta.component.html',
    styleUrls: ['./meta.component.css']
})
export class MetaComponent  {
    res: any[];
    json;

    constructor(private http: Http) {}

    public getall(){
    // alert('error');
        const data = {
            "jsonrpc" : "2.0",
            "method" : "getall",
            "id" : "1",
            "params": {'argument' : 'something' }
        };
        this.http.post('http://localhost:80/jsonrpc', data).subscribe( res => console.log(this.json =   
res.text()));
        // ...

HTML:

<button (click)="getall()">view</button>
<pre>{{json}}</pre>

the response i got in my html page after clicking the button is :

{"result": [["water", "None"], ["temp", "001"], ["temp", "002"], ["temp", "003"], ["temp", "004"], ["temp", "005"], ["temp", "006"], "id": "1", "jsonrpc": "2.0"}

How to display this data in a table in the html page?

Answer 1

<tr *ngFor="let i of json" >
      <td>
        <input type=text [(ngModel)]="i.result" >
     </td>
</tr>

This will loop ur json data in table and u should alter the looping data as u need cheers..!