格式化JSON数据

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

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

如果格式化信息没有驻留在web gui中，但也可以由web服务提供，那将会很好。我是否也可以在json输出中包含函数信息？任何其他想法来实现我的目标？

谢谢。

来源

2011-02-03 Stathis

我做了一个角指令对此事 http://mohsenweb.com/json-formatter/dist/ – Mohsen 2014-08-03 22:41:11

如果我正确地阅读了这篇文章，那么您肯定可以向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>

让你的web服务添加所需的样式信息的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>

来源

2011-02-03 23:01:28

或者[{'someFieldName'：{'value'：'aaa'，'cssClass'：'class-a'}，'someOtherFieldName'：{'value'：3，'cssClass'：'redCell' }}，{ 'someFieldName'：{ '值'： 'BBB'， '的CssClass'：” class-b'}，'someOtherFieldName'：{'value'：5，'cssClass'：'blueCell'}}]，因此您可以为每个属性指定cssClass，而不是在对象级定义它。取决于您实际需要指定独特样式的多少属性。 – 2011-02-03 23:12:18

我开发了一个jQuery插件来表示HTML表格中的JSON数据。它将为您的工作提供良好的框架。只需将它放在GitHub https://github.com/anuary/jquery-json-to-table上即可。

enter image description here

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

来源

2012-08-19 12:31:46 Gajus

尝试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>

来源

2015-05-12 05:58:40 vusan

格式化JSON数据

回答

相关问题