格式化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數據

回答

相關問題