CODEWITHSUNDEEP
jsonjqgrid
Tim
Tim

Reputation: 1023

how to display jqgrid from url (local data works, url data does not)

I have looked various question/answers on stackoverflow, but haven't found a solution.

When I use the first block of jqgrid code (data is local), the table and the data are displayed.

When I use the second block (data loaded from url), an empty table is displayed.

The strange part is that the local data is the actual content of the url file. So I had assumed that the behavior would be identical.

Why can I not display the data using the url, when the same data, if copied into the code, is displayed?

The HTML (calls mytest.js which contains the jqgrid code):

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" href="jquery-ui-1.8.23.custom.css" />
   <link rel="stylesheet" href="ui.jqgrid.css" />
   <script src="jquery-1.8.0.min.js"></script>
   <script src="jquery-ui-1.8.23.custom.min.js"></script>
   <script src="grid.locale-en.js"></script>    
   <script src="jquery.jqGrid.min.js"></script>
   <script src="mytest.js" type="text/javascript"></script>
</head>
<body>
<h1>hey</h1>
  <table id="jqgrid"></table>
</body>
</html>

JSON as local data (data displays, [here, edited for brevity]):

var mydata = [
         {"_id": {"$oid": "50a3f962b7718da1a3090fa9"}, 
         "config": {"titlepage": 
                      {"title": "My First Title",
                       "color": true,
                       "fontsize": "42/44",
                      }
                   }
         },
         {"_id": {"$oid": "50a3f962b7718da1a3090faa"}, 
         "config": {"titlepage": 
                      {"title": "My Second Title",
                       "color": true,
                       "fontsize": "42/44",
                      }
                   }
         }
         ];
jQuery(document).ready(function(){
    $('#jqgrid').jqGrid({
        datatype: 'local',
        data: mydata,
        jsonReader: {
            repeatitems : false,
        },
        caption: 'Titlepage Parameters',
        colNames: ['title', 'color','fontsize'],
        colModel: [
            {name: 'config.titlepage.title'},
            {name: 'config.titlepage.color'},
            {name: 'config.titlepage.fontsize'},
        ],
    });
});

JSON via URL (no data displayed). The file mydata.json contains the same data that is used above, but in a local file instead of in the actual js code:

jQuery(document).ready(function(){
    $('#jqgrid').jqGrid({
        url:'mydata.json',
        datatype:"json",
    jsonReader: {
        repeatitems : false,
    },
    caption: 'Titlepage Parameters',
    colNames: ['title', 'color','fontsize'],
    colModel: [
        {name: 'config.titlepage.title'},
        {name: 'config.titlepage.color'},
        {name: 'config.titlepage.fontsize'},
    ],
    });
});

Upvotes: 0

Views: 8256

Answers (2)

Tim
Tim

Reputation: 1023

Oleg's answer is the full solution.

Here is the modified code which works. That is, the code I originally wrote plus the one change (from Oleg) that successfully loaded the data into the grid. The key for me was to add the root function in jsonReader:

jQuery(document).ready(function(){
    $('#jqgrid').jqGrid({
        url:'mydata.json',
        datatype:"json",
        jsonReader: {
            root: function (obj) { return obj; },
            repeatitems : false,
        },
        caption: 'Titlepage Parameters',
        colNames: ['title', 'color','fontsize'],
        colModel: [
            {name: 'config.titlepage.title'},
            {name: 'config.titlepage.color'},
            {name: 'config.titlepage.fontsize'},
        ],
    });
});

Upvotes: 0

Oleg
Oleg

Reputation: 221997

First of all I would fix a little your first version of working code. jsonReader will be not used if you use jsonReader. Instead of that it will be used localReader. Additionally I would recommend you always use native id values if the input data have such one. So I would fix the code to the following:

$(function () {
    "use strict";
    var mydata = [
            {
                "_id": {"$oid": "50a3f962b7718da1a3090fa9"},
                "config": {
                    "titlepage": {
                        "title": "My First Title",
                        "color": true,
                        "fontsize": "42/44"
                    }
                }
            },
            {
                "_id": {"$oid": "50a3f962b7718da1a3090faa"},
                "config": {
                    "titlepage": {
                        "title": "My Second Title",
                        "color": true,
                        "fontsize": "42/44"
                    }
                }
            }
        ];
    $('#jqgrid').jqGrid({
        datatype: 'local',
        data: mydata,
        caption: 'Titlepage Parameters',
        gridview: true,
        height: 'auto',
        colNames: ['title', 'color', 'fontsize'],
        colModel: [
            {name: 'config.titlepage.title' },
            {name: 'config.titlepage.color' },
            {name: 'config.titlepage.fontsize' },
        ],
        localReader: {
            id: "_id.$oid"
        }
    });
});

See the first demo.

In case of usage datatype: "json" you need to fix the jsonReader:

$(function () {
    "use strict";
    $('#jqgrid').jqGrid({
        datatype: 'json',
        url: 'Tim2.json',
        caption: 'Titlepage Parameters',
        gridview: true,
        height: "auto",
        //colNames: ['title', 'color', 'fontsize'],
        colModel: [
            {name: 'title', jsonmap: 'config.titlepage.title' },
            {name: 'color', jsonmap: 'config.titlepage.color' },
            {name: 'fontsize', jsonmap: 'config.titlepage.fontsize' },
        ],
        jsonReader: {
            repeatitems: false,
            id: "_id.$oid",
            root: function (obj) {
                return obj;
            }
        }
    });
});

See another demo.

Upvotes: 2

Related Questions