JQuery

Convert JSON Data Into Data Grid Columns

In this post we will see how to show our JSON data in a client side grid. Here we are going to use jquery.columns grid, which is light weight and pretty easy to use. For the demo purpose we will create a JSON dynamically in client side and format it as a grid. I hope you will like this.

Using the code

First of all you need to download the needed files from here.

Then add reference to your page.

  1. <link href="css/classic.css" rel="stylesheet" />  
  2. <script src="js/jquery.min.js"></script>  
  3. <script src="js/jquery.columns-1.0.min.js"></script>  

Creating a JSON dynamically

You can create a JSON array as follows.

  1. var myData = new Array();  
  2. var firstNames = ["Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"];  
  3. var lastNames = ["Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"];  
  4. var productNames = ["Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"];  
  5. var priceValues = ["2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"];  
  6.   
  7. function createData(num)  
  8. {  
  9.     myData = [];  
  10.     for (var i = 0; i < num; i++)  
  11.     {  
  12.         var row = {};  
  13.         var productindex = Math.floor(Math.random() * productNames.length);  
  14.         var price = parseFloat(priceValues[productindex]);  
  15.         var quantity = 1 + Math.round(Math.random() * 10);  
  16.         row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];  
  17.         row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];  
  18.         row["productname"] = productNames[productindex];  
  19.         row["price"] = price;  
  20.         row["quantity"] = quantity;  
  21.         row["total"] = price * quantity;  
  22.         myData[i] = row;  
  23.     }  
  24. }  

Here the function createData will create a JSON array.

Next we need to create a table and give this array as a data source to the grid.

  1. <table id="dataGrid" class="display" width="100%"></table>  
  2. $(function ()  
  3.   {   
  4.   createData(25); $('#dataGrid').columns  
  5.   ({   
  6.     data: myData  
  7.   });   
  8. });  

Pretty simple, right?

Complete code

  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.   
  4. <head>  
  5.     <title>Convert JSON Data Into Data Grid Columns</title>  
  6.     <link href="css/classic.css" rel="stylesheet" />  
  7.     <script src="js/jquery.min.js"></script>  
  8.     <script src="js/jquery.columns-1.0.min.js"></script>  
  9.     <script>  
  10.         var myData = new Array();  
  11.         var firstNames = ["Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"];  
  12.         var lastNames = ["Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"];  
  13.         var productNames = ["Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"];  
  14.         var priceValues = ["2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"];  
  15.         $(function()  
  16.           {  
  17.             createData(25);  
  18.             $('#dataGrid').columns(  
  19.               {  
  20.                 data: myData  
  21.             });  
  22.         });  
  23.   
  24.         function createData(num)   
  25.         {  
  26.             myData = [];  
  27.             for (var i = 0; i < num; i++)  
  28.             {  
  29.                 var row = {};  
  30.                 var productindex = Math.floor(Math.random() * productNames.length);  
  31.                 var price = parseFloat(priceValues[productindex]);  
  32.                 var quantity = 1 + Math.round(Math.random() * 10);  
  33.                 row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];  
  34.                 row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];  
  35.                 row["productname"] = productNames[productindex];  
  36.                 row["price"] = price;  
  37.                 row["quantity"] = quantity;  
  38.                 row["total"] = price * quantity;  
  39.                 myData[i] = row;  
  40.             }  
  41.         }  
  42.     </script>  
  43. </head>  
  44.   
  45. <body>  
  46.     <table id="dataGrid" class="display" width="100%"></table>  
  47. </body>  
  48.   
  49. </html>  

Output

If everything goes fine, you can see the following  as an output in your page.

JSON Data Into Data Grid

JSON Data Into Data Grid

Please see this article in my blog here.

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.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs