如何以html-table格式打印JSON格式的JSON-RPC输出

Question

基本上，我有一个包含客户端和服务器的设置。客户端是在angularjs中实现的，它将get请求发送到服务器，服务器连接到mongoDB并检索结果，并以json格式发送回响应。

我发送的请求如下：

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()))

而我得到的回应是：

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

现在，我希望将响应打印为html页面中的表格，如下图所示：

​

​

Answer 1

也许，这段代码会有用。

​

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>

​