2011-02-03 17 views
0

私は次の2つのブロックを設計中です: - データベースから特定のデータを取得してjson形式で呼び出し元に返すWebサービス(安らかなもの)。 - Webサービスから提供されたjsonデータを使用するwebguiアプリケーション(呼び出し元)。JSONデータの書式設定

Web GUIアプリケーションのビューの1つに、Webサービスが受信したjson応答を視覚化する単純なテーブルが含まれています。私がしたいのは、セルのデータに従ってテーブルの特定のセルをフォーマットすることです。たとえば、値が<のセルは赤い背景になります。

フォーマット情報がWeb GUI上に存在しない場合はいいかもしれませんが、Webサービスでも提供できます。 json出力に関数情報も含めることができますか?私の目標を達成するための他のアイデア?

ありがとうございます。

+0

preタグに表示/ dist/ – Mohsen

答えて

1

これを正しく読んでいるなら、確かにJSONにいくつかのスタイリング情報を追加して、それをあなたのTDに押し込むことができます。

あなたのJSONが現在

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

ようになり、それはあなたのWebサービスを持って

<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を追加しますyを個別にスタイルする必要がある場合はyを指定します。

[{'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> 
+1

または '{' someFieldName ':{'値 ':' aaa '、' cssClass ':'クラス-a '}、' someOtherFieldName ':{'値 ':3、' cssClass ':' redCell ' }}、{'someFieldName':{'値': 'bbb'、 'cssClass': 'オブジェクトレベルで一度定義するのではなく、各プロパティに対してcssClassを指定することができます。独自のスタイルを指定するために実際に必要なプロパティの数によって異なります。 –

+0

これは妥当なことと思われます。だから、私はjson上でjavascript関数を渡し、クライアント側でその結果を評価するのは適切ではないと思います。 – Stathis

1

JSONデータをHTMLテーブルで表現するためのjQueryプラグインを開発しました。それはあなたがしていることの枠組みとしてあなたを満足させるでしょう。 GitHub https://github.com/anuary/jquery-json-to-tableでフォークしてください。

enter image description here

欠けている部分を追加するのは簡単になります。スクリプトは、(クラスをテーブル行に割り当てることによって)データ型を提示しています。さらに、ツリー全体を一度に表示するのではなく、データを閲覧することができます。

0

お試しJSON.stringify

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

今、私はこの問題 http://mohsenweb.com/json-formatterのための角度指令を作った

使用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>