Home/ Questions/Q 1095141
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T00:04:39+00:00

I have been struggeling all day to read a json file from server and

  • 0

I have been struggeling all day to read a json file from server and view it via dojo datagrid. Please see the code snippets below and help me if possible :

the html file is ::

<head>
    <link rel="stylesheet" type="text/css" href="../../_static/js/dijit/themes/claro/claro.css"
    />
    <style type="text/css">
        body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
    </style>
    <style type="text/css">
        @import "../../_static/js/dojox/grid/resources/Grid.css"; @import "../../_static/js/dojox/grid/resources/claroGrid.css";
        .dojoxGrid table { margin: 0; } html, body { width: 100%; height: 100%;
        margin: 0; }
    </style>
</head>

<body class=" claro ">
    <div id="gridContainer4" style="width: 100%; height: 100%;">
    </div>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dojo.data.ItemFileReadStore");
        dojo.require("dijit.form.ComboBox");
        dojo.require("dijit.form.Button");        
dojo.require("dojox.grid.DataGrid");
    dojo.require("dojox.data.CsvStore");

    dojo.addOnLoad(function() {
        // our test data store for this example:
        var store4 = new dojo.data.ItemFileReadStore({
    url: "http://localhost/test1.json"});

        // set the layout structure:
        var layout4 = [{
            field: 'abbr',
            name: 'Title of Movie',
            width: '200px'
        },
        {
            field: 'name',
            name: 'Year',
            width: '50px'
        },
        {
            field: 'capital',
            name: 'Producer',
            width: 'auto'
        }];

        // create a new grid:
        var grid4 = new dojox.grid.DataGrid({
            query: {
                abbr: '*'
            },
            store: store4,
            clientSort: true,
            rowSelector: '20px',
            structure: layout4
        },
        document.createElement('div'));

        // append the new grid to the div "gridContainer4":
        dojo.byId("gridContainer4").appendChild(grid4.domNode);

        // Call startup, in order to render the grid:
        grid4.startup();
    });
</script>
<!-- NOTE: the following script tag is not intended for usage in real
world!! it is part of the CodeGlass and you should just remove it when
you use the code -->
<script type="text/javascript">
    dojo.addOnLoad(function() {
        if (document.pub) {
            document.pub();
        }
    });
</script>

The json is ::

{ identifier: 'abbr',
          label: 'name',
          items: [
                { abbr:'ec', name:'Ecuador',           capital:'Quito' },
                { abbr:'eg', name:'Egypt',             capital:'Cairo' },
                { abbr:'sv', name:'El Salvador',       capital:'San Salvador' },
                { abbr:'gq', name:'Equatorial Guinea', capital:'Malabo' },
                { abbr:'er', name:'Eritrea',           capital:'Asmara' },
                { abbr:'ee', name:'Estonia',           capital:'Tallinn' },
                { abbr:'et', name:'Ethiopia',          capital:'Addis Ababa' }
        ]}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I am not use dojo, but if the file content of test1.json is really as you wrote at the end of your post, then it is wrong. In JSON format all property names and all strings must be double quoited. So try to replace the test1.json file with the following

    {
    "identifier": "abbr",
    "label": "name",
    "items": [
        { "abbr": "ec", "name": "Ecuador", "capital": "Quito" },
        { "abbr": "eg", "name": "Egypt", "capital": "Cairo" },
        { "abbr": "sv", "name": "El Salvador", "capital": "San Salvador" },
        { "abbr": "gq", "name": "Equatorial Guinea", "capital": "Malabo" },
        { "abbr": "er", "name": "Eritrea", "capital": "Asmara" },
        { "abbr": "ee", "name": "Estonia", "capital": "Tallinn" },
        { "abbr": "et", "name": "Ethiopia", "capital": "Addis Ababa" } 
    ]
}

    A good place where you can validate your JSON data is http://www.jsonlint.com/.

    • 0