Question

我正在设计以下两个块： - 一个Web服务（restful one），它从数据库中检索某些数据并以json格式将它们返回给调用者。 - webgui应用程序（调用者），它使用Web服务提供的json数据。

web gui应用程序中的一个视图包含一个简单的表，它可视化Web服务收到的json响应。我想要做的是根据单元格数据格式化表格的某些单元格，例如：值为＆lt; 10，有红色背景。

如果格式化信息不驻留在web gui上会很好，但也可以由Web服务提供。我可以在json输出中包含函数信息吗？为实现我的目标还有其他想法吗？

谢谢。

Answer 1

如果我正确地阅读此内容，您当然可以向JSON添加一些样式信息并将其直接推送到您的td。

想象一下，您的JSON目前看起来像

[{'someFieldName':'aaa','someOtherFieldName':3}, {'someFieldName':'bbb','someOtherFieldName':5}]

这就创造了类似

的东西

<table>
    <tr>
        <th>someFieldName</th>
        <th>someOtherFieldName</th>
    </tr>
    <tr>
        <td>aaa</td>
        <td>3</td>
    </tr>
    <tr>
        <td>bbb</td>
        <td>5</td>
    </tr>
</table>

让您的网络服务将所需的样式信息添加到JSON中，然后将其弹出到td：

[{'someFieldName':'aaa','someOtherFieldName':3,'cssClass':'redCell'}, {'someFieldName':'bbb','someOtherFieldName':5,'cssClass':'blueCell'}]

...
<td class='redCell'>3</td>
...
<td class='blueCell'>5</td>

或者，如果您需要单独设置每个属性的样式，请将cssClass添加到每个属性。

[{'someFieldName':{'value':'aaa','cssClass':'class-a'},'someOtherFieldName':{'value':3,'cssClass':'redCell'}},{'someFieldName':{'value':'bbb','cssClass':'class-b'},'someOtherFieldName':{'value':5,'cssClass':'blueCell'}}]
...
<td class='class-a'>aaa</td>
<td class='redCell'>3</td>
...
<td class='class-b'>bbb</td>
<td class='blueCell'>5</td>

Answer 2

我开发了一个jQuery插件来表示HTML表格中的JSON数据。它将作为您正在做的事情的框架。只需将它分叉到GitHub https://github.com/anuary/jquery-json-to-table。

enter image description here

添加缺失的部分很容易。该脚本已经建议（通过为表行分配类）数据类型。此外，它允许浏览数据，而不是一次显示整个树。

Answer 3

尝试JSON.stringify。

var jsonObject = { foo: "sample", bar: "sample" };
JSON.stringify(jsonObject, null, 4)

现在将其显示在pre代码

上

使用AngularJS

function json($scope) {

  $scope.jsonObject = {
    foo: "sample",
    bar: "sample"
  };
  $scope.jsonObjectFormatted = JSON.stringify($scope.jsonObject, null, 4);
}

<html ng-app>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="json">
  <pre>{{jsonObject}}</pre>
  <pre>{{jsonObjectFormatted}}</pre>
</div>

</html>

格式化JSON数据

3 个答案: