reading json with dojo to show in grid_问答_开发者

开发者 https://www.devze.com 2023-01-17 21:04 出处：网络

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 :

相关专题：dojo json

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', n开发者_运维技巧ame:'Eritrea',           capital:'Asmara' },
                { abbr:'ee', name:'Estonia',           capital:'Tallinn' },
                { abbr:'et', name:'Ethiopia',          capital:'Addis Ababa' }
        ]}

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/.