jQWidgets Forums

Tagged: datagrid, jquery grid with nested json, jqxgrid

This topic contains 6 replies, has 3 voices, and was last updated by kakao 11 years, 2 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

multilevel deep json in the Grid's datasource Posts

October 22, 2012 at 8:13 pm multilevel deep json in the Grid's datasource #9885

bugaam

Member

I have a json which goes 2 levels deep. Here is an example

[
{
“state”:{
“id”:x526,
“city”:{
“name”:”Beverly Hills”,
“id”:90210,
“value”:”Beverly Hills”
}
}
]

I have defined datafields in the source like this :

var source = {
datatype : “json”,
datafields : [
{ name: ‘cityName’, map: ‘state>city>name’}
}

This does not work. Accessing id works fine(state>id). Can the grid only handle 2 levels of nested json? If it can handle more, how do I do this?

October 23, 2012 at 4:53 am multilevel deep json in the Grid's datasource #9888

Peter Stoev

Keymaster

Hi bugaam,

I updated your code due to some syntax issues.

Here’s a working sample: http://jsfiddle.net/jqwidgets/2n5EA/

The source is below:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data = [
                {
                    "state": {
                        "id": "x526",
                        "city": {
                            "name": "Beverly Hills",
                            "id": 90210,
                            "value": "Beverly Hills"
                        }
                    }
                }
            ];
            var source = {
                datatype: 'json',
                localdata: data,
                datafields:
                [
                    {
                        name: 'cityName', map: 'state>city>name'
                    }
                ]
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                columns: [
                  { text: 'cityName', datafield: 'cityName'}
                ]
            });
        });
    </script>
</head>
<body class='default'>
      <div id="jqxgrid"></div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

October 23, 2012 at 3:40 pm multilevel deep json in the Grid's datasource #9957

bugaam

Member

Thanks for the quick response. The reason It wasn’t loading for me is that I had a null object. How do I deal with those? Here is the json

[
{
“state”:{
“id”:x526,
“city”:{
“name”:”Beverly Hills”,
“id”:90210,
“value”:”Beverly Hills”
},
{
“state”:{
“id”:x333,
“city”:{
“name”:null,
“id”:null,
“value”:null
}
}
]

October 24, 2012 at 3:22 pm multilevel deep json in the Grid's datasource #10007

Peter Stoev

Keymaster

Hi bugaam,

The issue was in the formatting of your data. There was missing ‘}’ symbols.

The updated working code is below:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var data =
            [
               {
                   "state":{
                       "id":"x526",
                       "city":{
                           "name":"Beverly Hills",
                           "id":90210,
                           "value":"Beverly Hills"
                       }
                   }},
                {
                    "state": {
                        "id": "x333",
                        "city": {
                            "name": null,
                            "id": null,
                            "value": null
                        }
                    }
                }
            ];
            var source = {
                datatype: 'json',
                localdata: data,
                datafields:
                [
                    {
                        name: 'cityName', map: 'state>city>name'
                    }
                ]
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                columns: [
                  { text: 'cityName', datafield: 'cityName' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
      <div id="jqxgrid"></div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

March 24, 2014 at 2:48 pm multilevel deep json in the Grid's datasource #51765

kakao

Participant

Is there any solutions to map ‘transaction’ / ‘together’ records?
‘maindata’ is necessary for other operations, so must leave in file.
Or there are bad json data formats?

{
  "filer": {
    "-xmlns:xsi": "http://www.w3.org/2001/XMLSchema-instance",
    "-xsi:noNamespaceSchemaLocation": "filer.xsd",
    "maindata": {
      "name": "jasmine",
      "pk": "0210385027549",
      "k": "2013",
      "time1": "2014-02-20T17:09:07",
      "time2": "2014-01-07T16:44:02"
    },
    "data": {
      "transactions": {
        "transaction": [
        {
            "from": "2013-10-29",
            "till": "2013-10-29",
            "type": "A",
            "income": "10.00",
            "outlay": "0.00",
            "dek": "0.00",
            "currency": "EUR"
          },
          {
            "from": "2013-10-31",
            "till": "2013-10-31",
            "type": "N",
            "income": "50.00",
            "outlay": "500.00",
            "dek": "0.00",
            "currency": "EUR"
          },
          {
            "from": "2013-01-01",
            "till": "2013-01-31",
            "income": "1800.00",
            "outlay": "0.00",
            "dek": "270.00",
            "currency": "EUR"
          },
          {
            "from": "2013-12-03",
            "till": "2013-12-29",
            "income": "1300.00",
            "outcome": "700.00",
            "dek": "130.00",
            "currency": "EUR"
          }
        ]
      },
      "together": {
        "income": "1860.00",
        "outlay": "500.00",
        "ap_income": "1360.00",
        "dek": "270.00",
        "ap_val": "204.00",
        "up_val": "66.00",
        "currency": "EUR"
      }
    }
  }
}

var source =
                          {
                              datatype: "json",
                              url: 'storefile.txt',
                              datafields: [
                              { name: 'from', type: 'date', format: 'dd.MM.yyyy', map: 'data>transactions>transaction>from' },
                              { name: 'till', type: 'date', format: 'dd.MM.yyyy', map: 'data>transactions>transaction>' },
                              { name: 'type', type: 'string', map: 'data>transactions>transaction>type' },
                              { name: 'income', type: 'string', map: 'data>transactions>transaction>income' },
                              { name: 'outcome', type: 'string', map: 'data>transactions>transaction>outcome' },
                              { name: 'dek', type: 'string', map: 'data>transactions>transaction>dek' },
                              {name: 'currency', type: 'string', map: 'data>transactions>transaction>currency' }
                              ]
                          };

March 24, 2014 at 7:31 pm multilevel deep json in the Grid's datasource #51776

Peter Stoev

Keymaster

Hi kakao,

The “root” and “record” members of the source object specify the Array’s root and “record”. I believe that in your case, you should have only “root” and it should be: data>transactions>transaction.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

March 25, 2014 at 7:14 am multilevel deep json in the Grid's datasource #51802

kakao

Participant

Thanks, master Peter Stoev!
It’s working!
I forget this simmilar solution!

Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.