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"];
  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">
  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. });
  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>
  45. <body>
  46. <table id="dataGrid" class="display" width="100%"></table>
  47. </body>
  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.