how to print the JSON-RPC output which is in JSON format in a html-table format

Question

Basically, I have a setup which has a client and a server. The client side is implemented in angularjs which sends the get request to the server, which is in python, that connects to mongoDB and retrieves the result and sends back the response in the json format.

the request which I had sent is the following:

const data = {
  "jsonrpc" : "2.0",
  "method" : "faultall",
  "id" : "1",

  "params": {'argument' : 'something' }
}
this.http.post('http://localhost:80/jsonrpc',data).subscribe( res => console.log(this.json =res.text()))

While the response I got is:

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

Now I want the response to be printed as a table in my html page like shown in the image:

Answer 1

Maybe, this code will useful

class AppController {
  
  constructor($q) {
    this.deferred = $q.defer();
  }
  
  getData() {
    const response = {"result": [["water", "001"], ["water", "002"], ["temp", "003"]], "id": "1", "jsonrpc": "2.0"};
    setTimeout(() => {
      this.deferred.resolve(response.result);
    }, 1000);
    return this.deferred.promise;
  }
  
  fillTable() {
    this.dataLoading = true;
    this.getData()
    .then(data => {
      this.data = data;
      this.dataLoading = false;
    });
  }
}

angular.module('app', [])
.controller('appController', AppController);

AppController.$inject = ['$q'];

angular.bootstrap(
  document.getElementById('root'),
  ['app']
);

html, body {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div id="root" ng-controller="appController as ctrl">
  <div style="margin: 1rem;">
    <button 
      class="btn btn-primary"
      ng-click="ctrl.fillTable()"
    >
      <span ng-bind="ctrl.dataLoading ? 'Loading' : 'Fetch data'"></span>
    </button>
  </div>
  <table class="table" ng-show="ctrl.data.length > 0">
    <thead>
      <tr>
        <th>Name</th>
        <th>Id</th>
      </tr>
    </thead>
      <tr ng-repeat="row in ctrl.data">
        <td ng-bind="::row[0]"></td>
        <td ng-bind="::row[1]"></td>
      </tr>
    <tbody>
    </tbody>
  </table>
  <pre>{{ $ctrl.data | json}}</pre>
</div>