CODEWITHSUNDEEP
jqueryjqgrid
Daniel Ward
Daniel Ward

Reputation: 165

Trying to load simple json into jQGrid

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"
   },
]

Upvotes: 0

Views: 58

Answers (1)

Oleg
Oleg

Reputation: 221997

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.

Upvotes: 2

Related Questions