Post
Ask Question

Style Or Format JSON Data In JQuery

In this post we will discuss how we can format or style the JSON you get from the server. Sometimes you may need to show the exact JSON you get from your API or from server in your web page. Normally if you just bind this JSON to any pre tag, it will look like just a straight line. Won’t it? To overcome this we have an option in jQuery . I hope you will like this.

Please see this article in my blog here.

Background

For the past few months I have been working with some Web API projects. As you all know the preferred output of an API is JSON, I am returning JSON from my API. I wanted to show this JSON in a Pre tag as a result, but in a formatted way or stylish way. Here I am going to explain how we can do this.

Using the code

Before getting started, please make sure that you have added the jQuery reference to your page.

  1. <script src="scripts/jquery-2.2.3.js"></script>  

Now let us say we are getting a JSON as follows from our API.

  1. [{  
  2.     "AreaCode": "B697-31",  
  3.     "Revenue": 12747128.190000001  
  4. }, {  
  5.     "AreaCode": "B697-92",  
  6.     "Revenue": 7922559.1600000048  
  7. }, {  
  8.     "AreaCode": "B697-76",  
  9.     "Revenue": 7541039.540000001  
  10. }, {  
  11.     "AreaCode": "B697-46",  
  12.     "Revenue": 7076495.5800000066  
  13. }, {  
  14.     "AreaCode": "B553-131",  
  15.     "Revenue": 5738816.5099999979  
  16. }, {  
  17.     "AreaCode": "B553-193",  
  18.     "Revenue": 4608556.52  
  19. }, {  
  20.     "AreaCode": "B697-74",  
  21.     "Revenue": 3895194.1099999994  
  22. }, {  
  23.     "AreaCode": "D158-233",  
  24.     "Revenue": 3572808.989999996  
  25. }, {  
  26.     "AreaCode": "B697-78",  
  27.     "Revenue": 3512657.6999999937  
  28. }, {  
  29.     "AreaCode": "B672-31",  
  30.     "Revenue": 2955916.9800000032  
  31. }, {  
  32.     "AreaCode": "B553-46",  
  33.     "Revenue": 2806813.7100000042  
  34. }]  

It will obviously looks like the preceding when you just append it to a pre tag.

JSON in Pre Tag
                                       JSON in Pre Tag

Now we will format this JSON string with JQuery Parse and JQuery stringify method as follows.

  1. var tmpData = JSON.parse(data);  
  2. var formattedData = JSON.stringify(tmpData, null, '\t');  
  3. $('#output').text(formattedData);   

Here output is the id of our pre tag which we defined as follows.

  1. <pre id="output"></pre>  

Now if you bind the data after the formatting to pre tag, you will get an out put as follows.

JSON in Pre Tag Output
                           JSON in Pre Tag Output

Conclusion

Did I miss anything that you may think is needed? Did you find this post useful? I hope you liked this article. Please share with me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.