CODEWITHSUNDEEP
json
Stathis
Stathis

Reputation: 63

Formatting JSON data

I am in the process of designing the following two blocks: - a web service (restful one), which retrieves certain data from the database and returns them in json format to the caller. - a webgui application (the caller) which consumes the json data as provided by the web service.

One of the views in the web gui application contains a simple table, which visualizes the json response as received by the web service. What I would like to do is format certain cells of the table according to the cell data, for example: a cell with value < 10, has a red background.

It would be nice if the formatting information did not reside on the web gui, but could be provided by the web service as well. Could I also contain function information in the json output? Any other ideas for achieving my goal?

Thank you.

Upvotes: 0

Views: 3436

Answers (3)

vusan
vusan

Reputation: 5331

Try JSON.stringify.

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

Now display it on pre tag

Using 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>

Upvotes: 0

Gajus
Gajus

Reputation: 73968

I've developed a jQuery plugin to represent JSON data in an HTML table. It will serve you well as a framework for what you are doing. Just fork it on GitHub https://github.com/anuary/jquery-json-to-table.

enter image description here

Adding the missing pieces will be easy. The script already suggests (by assigning classes to the table rows) data type. Furthermore, it allows browsing data, rather than displaying the whole tree at once.

Upvotes: 1

David Ruttka
David Ruttka

Reputation: 14409

If I'm reading this correctly, you could certainly add some styling information to the JSON and push it right into your td.

Imagine that your JSON currently looks something like

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

And that created something like

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

Have your web service add the desired styling information to the JSON and just pop it on the td:

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

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

Alternatively, add cssClass to each property if you need to style each independently.

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

Upvotes: 1

Related Questions