Trying to load simple json into jQGrid

Question

ok so Im jsut trying to load some simple json data into an html table using jqgrid. I have seen some posts mention using jsonreader option but I cant find documentation on how to implement it properly. I thought this was going to be super easy!. anywahy the page is at http://thethunderdome.hfbsite.com/economy/test.htm

js code :

    $(function(){
    var pricesUrl = "/economy/prices3.txt"

    jQuery("#pricetable").jqGrid({
        url:pricesUrl,
        datatype: "json",
        colNames:['Item Name','Price', 'Trade Status'],
        colModel:[
            {name:'Name', width:100},
            {name:'Price', width:90},
            {name:'Trade',width:100},       
        ],

        rowNum:10,
        rowList:[10,20,30],
        pager: '#pager2',
        sortname: 'Name',
        viewrecords: true,
        sortorder: "asc",
        caption:"JSON Example"
    });

});

json data :

    [
   {
      "Price":"5",
      "Name":"Wood",
      "Trade":"all"
   },
   {
      "Price":"5",
      "Name":"Sulfur Ore",
      "Trade":"all"
   },
   {
      "Price":"5",
      "Name":"Raw Chicken Breast",
      "Trade":"all"
   },
   {
      "Price":"5",
      "Name":"Cloth",
      "Trade":"all"
   },
   {
      "Price":"5",
      "Name":"Metal Ore",
      "Trade":"all"
   },
   {
      "Price":"5",
      "Name":"Stones",
      "Trade":"all"
   },
   {
      "Price":"5",
      "Name":"Animal Fat",
      "Trade":"all"
   },
   {
      "Price":"12500",
      "Name":"M4",
      "Trade":"all"
   },
      "Price":"9000",
      "Name":"Shotgun",
      "Trade":"all"
   },
      "Price":"500",
      "Name":"Small Medkit",
      "Trade":"all"
   },
   }
      "Price":"1000",
      "Name":"Large Medkit",
      "Trade":"all"
   },
]

score 2 · Accepted Answer · answered Jan 22 '14 at 16:17

The data which you posted aren't correct JSON data. If you look the last part of your data you will see

[
   ...
   {
      "Price":"12500",
      "Name":"M4",
      "Trade":"all"
   },                       ---- where {
      "Price":"9000",
      "Name":"Shotgun",
      "Trade":"all"
   },                       ---- where {
      "Price":"500",
      "Name":"Small Medkit",
      "Trade":"all"
   },
   }                        ---- why } ??? one need {
      "Price":"1000",
      "Name":"Large Medkit",
      "Trade":"all"
   },                       ---- why , is here ???
]

I recommend you to verify the JSON data on http://www.jsonlint.org/.

After you fix the data and it will be loaded correct I would recommend you add loadonce: true option because you probably want to load all data at once and don't implement server side paging, sorting and filtering/searching. Other options gridview: true and autoencode: true are also recommended.

@DanielWard: You are welcome! Additionally I would recommend you to include `loadError` callback in all your jqGrids. It can save many of your time. See [the answer](http://stackoverflow.com/a/6969114/315935) for more details. — Oleg, Jan 22 '14 at 17:10

Trying to load simple json into jQGrid

1 Answers1