I have json like below [ { UserName: John Robertson, OperatorUserId: 1177, PartCategoryID: 0,

Question

0

Asked: May 28, 20262026-05-28T13:45:36+00:00 2026-05-28T13:45:36+00:00

I have json like below [ { UserName: John Robertson, OperatorUserId: 1177, PartCategoryID: 0,

0

I have json like below

[
{
    "UserName": "John Robertson",
    "OperatorUserId": 1177,
    "PartCategoryID": 0,
    "PartCategoryName": null,
    "UnitCount": 22,
    "CategoryWiseCount": 13,
    "TotalUsers": 0,
    "TotalCategories": 0,
    "MainArrayCount": null,
    "NewMainArrayCount": null,
    "ListCategorywiseCount": [6, 1, 2, 0, 0, 0, 13, 0, 0],
    "ListCategories": ["Base Unit", "Hard Drive", "Laptop", "Laptop AC Adapter", "Motherboard", "Optical Drive", "Processor (CPU)", "Server", "TFT"],
    "ListUsers": ["John Robertson", "user1", "Margaret Graham", "Stuart White", "Bob van Schie", "Caird Hay", "bsoni", "tsname"]
}, {
    "UserName": "user1",
    "OperatorUserId": 39,
    "PartCategoryID": 0,
    "PartCategoryName": null,
    "UnitCount": 13,
    "CategoryWiseCount": 1,
    "TotalUsers": 0,
    "TotalCategories": 0,
    "MainArrayCount": null,
    "NewMainArrayCount": null,
    "ListCategorywiseCount": [1, 0, 3, 1, 1, 0, 0, 6, 1],
    "ListCategories": ["Base Unit", "Hard Drive", "Laptop", "Laptop AC Adapter", "Motherboard", "Optical Drive", "Processor (CPU)", "Server", "TFT"],
    "ListUsers": ["John Robertson", "user1", "Margaret Graham", "Stuart White", "Bob van Schie", "Caird Hay", "bsoni", "tsname"]
}, {
    "UserName": "Margaret Graham",
    "OperatorUserId": 1169,
    "PartCategoryID": 0,
    "PartCategoryName": null,
    "UnitCount": 2,
    "CategoryWiseCount": 2,
    "TotalUsers": 0,
    "TotalCategories": 0,
    "MainArrayCount": null,
    "NewMainArrayCount": null,
    "ListCategorywiseCount": [2, 0, 0, 0, 0, 0, 0, 0, 0],
    "ListCategories": ["Base Unit", "Hard Drive", "Laptop", "Laptop AC Adapter", "Motherboard", "Optical Drive", "Processor (CPU)", "Server", "TFT"],
    "ListUsers": ["John Robertson", "user1", "Margaret Graham", "Stuart White", "Bob van Schie", "Caird Hay", "bsoni", "tsname"]
}, {
    "UserName": "Stuart White",
    "OperatorUserId": 961,
    "PartCategoryID": 0,
    "PartCategoryName": null,
    "UnitCount": 1,
    "CategoryWiseCount": 1,
    "TotalUsers": 0,
    "TotalCategories": 0,
    "MainArrayCount": null,
    "NewMainArrayCount": null,
    "ListCategorywiseCount": [0, 1, 0, 0, 0, 0, 0, 0, 0],
    "ListCategories": ["Base Unit", "Hard Drive", "Laptop", "Laptop AC Adapter", "Motherboard", "Optical Drive", "Processor (CPU)", "Server", "TFT"],
    "ListUsers": ["John Robertson", "user1", "Margaret Graham", "Stuart White", "Bob van Schie", "Caird Hay", "bsoni", "tsname"]
}, {
    "UserName": "Bob van Schie",
    "OperatorUserId": 1007,
    "PartCategoryID": 0,
    "PartCategoryName": null,
    "UnitCount": 1,
    "CategoryWiseCount": 1,
    "TotalUsers": 0,
    "TotalCategories": 0,
    "MainArrayCount": null,
    "NewMainArrayCount": null,
    "ListCategorywiseCount": [0, 1, 0, 0, 0, 0, 0, 0, 0],
    "ListCategories": ["Base Unit", "Hard Drive", "Laptop", "Laptop AC Adapter", "Motherboard", "Optical Drive", "Processor (CPU)", "Server", "TFT"],
    "ListUsers": ["John Robertson", "user1", "Margaret Graham", "Stuart White", "Bob van Schie", "Caird Hay", "bsoni", "tsname"]
}, {
    "UserName": "Caird Hay",
    "OperatorUserId": 1184,
    "PartCategoryID": 0,
    "PartCategoryName": null,
    "UnitCount": 1,
    "CategoryWiseCount": 1,
    "TotalUsers": 0,
    "TotalCategories": 0,
    "MainArrayCount": null,
    "NewMainArrayCount": null,
    "ListCategorywiseCount": [0, 1, 0, 0, 0, 0, 0, 0, 0],
    "ListCategories": ["Base Unit", "Hard Drive", "Laptop", "Laptop AC Adapter", "Motherboard", "Optical Drive", "Processor (CPU)", "Server", "TFT"],
    "ListUsers": ["John Robertson", "user1", "Margaret Graham", "Stuart White", "Bob van Schie", "Caird Hay", "bsoni", "tsname"]
}, {
    "UserName": "bsoni",
    "OperatorUserId": 2575,
    "PartCategoryID": 0,
    "PartCategoryName": null,
    "UnitCount": 3,
    "CategoryWiseCount": 2,
    "TotalUsers": 0,
    "TotalCategories": 0,
    "MainArrayCount": null,
    "NewMainArrayCount": null,
    "ListCategorywiseCount": [0, 0, 0, 0, 1, 0, 2, 0, 0],
    "ListCategories": ["Base Unit", "Hard Drive", "Laptop", "Laptop AC Adapter", "Motherboard", "Optical Drive", "Processor (CPU)", "Server", "TFT"],
    "ListUsers": ["John Robertson", "user1", "Margaret Graham", "Stuart White", "Bob van Schie", "Caird Hay", "bsoni", "tsname"]
}, {
    "UserName": "tsname",
    "OperatorUserId": 2576,
    "PartCategoryID": 0,
    "PartCategoryName": null,
    "UnitCount": 1,
    "CategoryWiseCount": 1,
    "TotalUsers": 0,
    "TotalCategories": 0,
    "MainArrayCount": null,
    "NewMainArrayCount": null,
    "ListCategorywiseCount": [0, 0, 0, 0, 0, 1, 0, 0, 0],
    "ListCategories": ["Base Unit", "Hard Drive", "Laptop", "Laptop AC Adapter", "Motherboard", "Optical Drive", "Processor (CPU)", "Server", "TFT"],
    "ListUsers": ["John Robertson", "user1", "Margaret Graham", "Stuart White", "Bob van Schie", "Caird Hay", "bsoni", "tsname"]
}]

I want to look above data in grid using jquery template.

John Robertson    User1    Margaret Graham ..... 
Base unit            6             1          ...
Hard Drive           1             0          ...
.....

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-05-28T13:45:36+00:00

Explanation

There are a few things that need to be clear before we start.

First:
I’m assuming that by “template” you mean a plugin, because the JQuery.template is still in it’s beta, and it’s not really recommended to use yet. Besides, it won’t really do you much.

You can learn how to build your own plugins by starting here, I am however going to give you a complete example of how this is done (further down).

Generally, when you want an element related to your plugin, it begins with

(function($) {
    //Prototype
    $.fn.myPlugin = function(){
         //Logic
         $(this).append("Hello world!");
    }
})(JQuery);

$("#element").myPlugin();

Otherwise, as a general function accessed through $, it’s just

(function($) {
    //Prototype
    $.myPlugin = function(){
         //Logic
         alert("Hello world!");
    }
})(JQuery);

$.myPlugin();

Second:
When sending JSON through AJAX you’d want to have an object tied to your JSON, not an array. JSON stands for JavaScript Object Notation, so even by looking at the name, it should tell you it’s got something to do with objects.
In other words, you need to send back an object using curly braces {}.

So, your JSON should look something like this

{
    data: ["Hello ", 
           "World", 
           "!", 
           {time: "HH:mm:ss", date: "yyyy-mm-dd"}
}

You can read more about what it is on wikipedia.

Third:
For clarification, to request JSON data on an AJAX call, you have to specify the dataType as JSON. It is done like this

$.ajax({
    url: "example_json_output.txt",
    dataType: "json",
    success: function(json){
        alert(JSON.stringify(json));
    }
});

Note that I used the function JSON.stringify, which serializes (puts all the variables into text) the variable. Great for debugging purposes! 🙂

Alternatively, you can use the shorthand version, getJSON

$.getJSON("example_json_output.txt", function(json) {
    alert(JSON.stringify(json));
});

Solution

Before I give you the code, here is a screenshot of what your result should look like.
How the result should look like

Of course, I’m not saying you should do exactly as I did, in fact, I encourage you to do it differently. Practice makes perfect. Besides, that might not be the kind of layout you wanted.

As promised, here’s all the code to produce the above screenshot.
I’ll start with the JavaScript file and JSON output, as they are the most relevant.
Note that all files are within the same folder.

File: JavaScript “example.js”

$(document).ready(function(){
    $("body").myPlugin();
});

(function($) {
    $.fn.myPlugin = function(){
        //Internal reference
        var _this = this;

        //Begin request
        $.ajax({
            url: "example_json_output.txt",
            dataType: "json",
            success: Construct
        });

        function Construct(json){
            //Check if anything was returned
            if(json.data == null) return;

            //Main components
            var nMainContainer = $("<div>"),
                nListTable = $("<table>");

            nMainContainer.addClass("cMain");
            nListTable.addClass("cTable");
            nListTable.attr({"cellspacing":"0px", "cellpadding":"5px"})

            //Categories
            var aYHeaders = json.data[0].ListCategories;

            //Users row (top row)
            var nUserRow = $("<tr>");

            nUserRow.addClass("users");
            nUserRow.append($("<th>"));

            for(j = 0; j < json.data.length; j++){
                var nUser = $("<th>"),
                    sClass = "even";

                if(j % 2 == 0) sClass = "odd";

                nUser.addClass(sClass);
                nUser.append(json.data[j].UserName);

                nUserRow.append(nUser);
            }

            //Add users row to main table
            nListTable.append(nUserRow);

            //Begin iteration
            for(i = 0; i < aYHeaders.length; i++){
                //Category
                var nRow = $("<tr>"),
                    nHead = $("<th>"+aYHeaders[i]+"</th>"),
                    sRowClass = "even";

                //Check row number
                if( i % 2 == 0 ) sRowClass = "odd";

                nRow.addClass(sRowClass);

                //New category
                nRow.append(nHead);

                for(j = 0; j < json.data.length; j++){
                    //Data row from JSON
                    var oCurrentData = json.data[j];
                    var sUser = oCurrentData.UserName,
                        aListData = oCurrentData.ListCategorywiseCount,
                        sColumnClass = "even";
                    var nTableData = $("<td>");

                    //Check column number
                    if( j % 2 == 0 ) sColumnClass = "odd";
                    nTableData.addClass(sColumnClass);
                    nTableData.append(aListData[i]);

                    //Add data to current category row
                    nRow.append(nTableData);
                }
                //Add category row to main table
                nListTable.append(nRow);
            }

            //Add main table to container
            nMainContainer.append(nListTable);
            //Add container to this element
            $(_this).append(nMainContainer);
        }
    }
})(jQuery);

File: Text document “example_json_output.txt”

{"data": [
    {
        "UserName": "John Robertson",
        "OperatorUserId": 1177,
        "PartCategoryID": 0,
        "PartCategoryName": null,
        "UnitCount": 22,
        "CategoryWiseCount": 13,
        "TotalUsers": 0,
        "TotalCategories": 0,
        "MainArrayCount": null,
        "NewMainArrayCount": null,
        "ListCategorywiseCount": [6, 1, 2, 0, 0, 0, 13, 0, 0],
        "ListCategories": ["Base Unit", "Hard Drive", "Laptop", "Laptop AC Adapter", "Motherboard", "Optical Drive", "Processor (CPU)", "Server", "TFT"],
        "ListUsers": ["John Robertson", "user1", "Margaret Graham", "Stuart White", "Bob van Schie", "Caird Hay", "bsoni", "tsname"]
    }, {
        "UserName": "user1",
        "OperatorUserId": 39,
        "PartCategoryID": 0,
        "PartCategoryName": null,
        "UnitCount": 13,
        "CategoryWiseCount": 1,
        "TotalUsers": 0,
        "TotalCategories": 0,
        "MainArrayCount": null,
        "NewMainArrayCount": null,
        "ListCategorywiseCount": [1, 0, 3, 1, 1, 0, 0, 6, 1],
        "ListCategories": ["Base Unit", "Hard Drive", "Laptop", "Laptop AC Adapter", "Motherboard", "Optical Drive", "Processor (CPU)", "Server", "TFT"],
        "ListUsers": ["John Robertson", "user1", "Margaret Graham", "Stuart White", "Bob van Schie", "Caird Hay", "bsoni", "tsname"]
    }, {
        "UserName": "Margaret Graham",
        "OperatorUserId": 1169,
        "PartCategoryID": 0,
        "PartCategoryName": null,
        "UnitCount": 2,
        "CategoryWiseCount": 2,
        "TotalUsers": 0,
        "TotalCategories": 0,
        "MainArrayCount": null,
        "NewMainArrayCount": null,
        "ListCategorywiseCount": [2, 0, 0, 0, 0, 0, 0, 0, 0],
        "ListCategories": ["Base Unit", "Hard Drive", "Laptop", "Laptop AC Adapter", "Motherboard", "Optical Drive", "Processor (CPU)", "Server", "TFT"],
        "ListUsers": ["John Robertson", "user1", "Margaret Graham", "Stuart White", "Bob van Schie", "Caird Hay", "bsoni", "tsname"]
    }, {
        "UserName": "Stuart White",
        "OperatorUserId": 961,
        "PartCategoryID": 0,
        "PartCategoryName": null,
        "UnitCount": 1,
        "CategoryWiseCount": 1,
        "TotalUsers": 0,
        "TotalCategories": 0,
        "MainArrayCount": null,
        "NewMainArrayCount": null,
        "ListCategorywiseCount": [0, 1, 0, 0, 0, 0, 0, 0, 0],
        "ListCategories": ["Base Unit", "Hard Drive", "Laptop", "Laptop AC Adapter", "Motherboard", "Optical Drive", "Processor (CPU)", "Server", "TFT"],
        "ListUsers": ["John Robertson", "user1", "Margaret Graham", "Stuart White", "Bob van Schie", "Caird Hay", "bsoni", "tsname"]
    }, {
        "UserName": "Bob van Schie",
        "OperatorUserId": 1007,
        "PartCategoryID": 0,
        "PartCategoryName": null,
        "UnitCount": 1,
        "CategoryWiseCount": 1,
        "TotalUsers": 0,
        "TotalCategories": 0,
        "MainArrayCount": null,
        "NewMainArrayCount": null,
        "ListCategorywiseCount": [0, 1, 0, 0, 0, 0, 0, 0, 0],
        "ListCategories": ["Base Unit", "Hard Drive", "Laptop", "Laptop AC Adapter", "Motherboard", "Optical Drive", "Processor (CPU)", "Server", "TFT"],
        "ListUsers": ["John Robertson", "user1", "Margaret Graham", "Stuart White", "Bob van Schie", "Caird Hay", "bsoni", "tsname"]
    }, {
        "UserName": "Caird Hay",
        "OperatorUserId": 1184,
        "PartCategoryID": 0,
        "PartCategoryName": null,
        "UnitCount": 1,
        "CategoryWiseCount": 1,
        "TotalUsers": 0,
        "TotalCategories": 0,
        "MainArrayCount": null,
        "NewMainArrayCount": null,
        "ListCategorywiseCount": [0, 1, 0, 0, 0, 0, 0, 0, 0],
        "ListCategories": ["Base Unit", "Hard Drive", "Laptop", "Laptop AC Adapter", "Motherboard", "Optical Drive", "Processor (CPU)", "Server", "TFT"],
        "ListUsers": ["John Robertson", "user1", "Margaret Graham", "Stuart White", "Bob van Schie", "Caird Hay", "bsoni", "tsname"]
    }, {
        "UserName": "bsoni",
        "OperatorUserId": 2575,
        "PartCategoryID": 0,
        "PartCategoryName": null,
        "UnitCount": 3,
        "CategoryWiseCount": 2,
        "TotalUsers": 0,
        "TotalCategories": 0,
        "MainArrayCount": null,
        "NewMainArrayCount": null,
        "ListCategorywiseCount": [0, 0, 0, 0, 1, 0, 2, 0, 0],
        "ListCategories": ["Base Unit", "Hard Drive", "Laptop", "Laptop AC Adapter", "Motherboard", "Optical Drive", "Processor (CPU)", "Server", "TFT"],
        "ListUsers": ["John Robertson", "user1", "Margaret Graham", "Stuart White", "Bob van Schie", "Caird Hay", "bsoni", "tsname"]
    }, {
        "UserName": "tsname",
        "OperatorUserId": 2576,
        "PartCategoryID": 0,
        "PartCategoryName": null,
        "UnitCount": 1,
        "CategoryWiseCount": 1,
        "TotalUsers": 0,
        "TotalCategories": 0,
        "MainArrayCount": null,
        "NewMainArrayCount": null,
        "ListCategorywiseCount": [0, 0, 0, 0, 0, 1, 0, 0, 0],
        "ListCategories": ["Base Unit", "Hard Drive", "Laptop", "Laptop AC Adapter", "Motherboard", "Optical Drive", "Processor (CPU)", "Server", "TFT"],
        "ListUsers": ["John Robertson", "user1", "Margaret Graham", "Stuart White", "Bob van Schie", "Caird Hay", "bsoni", "tsname"]
    }
]}

File: HTML “example.html”

<html>
    <head>
        <link rel='stylesheet' type='text/css' href='example.css'>
        <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
        <script type='text/javascript' src='example.js'></script>
    </head>
    <body>
    </body>
</html>

File: CSS “example.css”

.cMain{padding: 5px;}
.cTable{border: 1px solid black;}

.cTable tr:first-child th{
    border-bottom: 1px solid black;
    text-align: center;
}

.cTable tr th:first-child{
    border-right: 1px solid black;
    text-align: right;
}

.cTable tr.odd td{background-color: #cbcbcb;}
.cTable tr.odd th{background-color: #b3b3b3;}
.cTable tr:first-child th.even{background-color: #accbe6;}
.cTable tr.even td.even{background-color: #cee1f2;}
.cTable tr.odd td.even{background-color: #a3c0d9;}
.cTable tr td{padding: 3px;}
.cTable tr:first-child th:first-child{background-color: #666;}
.cTable tr:first-child th:not(:first-child){width: 100px;}

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

I have json like below [ { UserName: John Robertson, OperatorUserId: 1177, PartCategoryID: 0,

Leave an answerCancel reply

1 Answer

Explanation

Solution

Leave an answer
Cancel reply