dojo:将json数据从本地文件(使用http)加载到dijit树

时间:2017-10-30 11:12:12

标签: json tree dojo store dijit.tree

file snapshot_report_js.js:

require([
    "dojo/dom",
    "dojo/json",
    "dojo/store/Memory",
    "dijit/tree/ObjectStoreModel",
    "dijit/Tree",
    "dojo/text!http://localhost:8080/dojo/json_data/snapshot.json",
    "dojo/domReady!",
    "dojo/_base/json"
], function(dom, json, Memory, ObjectStoreModel, Tree, small){
    var stringfied_content = JSON.stringify(small)
    var json_parsed_data = JSON.parse(stringfied_content, true)
    var json_data = dojo.toJson(json_parsed_data);
    // set up the store to get the tree data
    var json_store = new Memory({
        data: [ json_data ],
        getChildren: function(object){
            return object.children || [];
        }
    });
    // Create the model
    var snapshot_treeModel = new ObjectStoreModel({
        store: json_store,
        query: {id: 'snapshot'}
    });

    var snapshot_tree = new dijit.Tree({
        model: snapshot_treeModel
    }, 'div_snapshot_tree');
    snapshot_tree.startup();  
})

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Snapshot</title>
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<!-- load Dojo -->
<script src="dojo/dojo.js" data-dojo-config="async: true"></script>
<script src="js/snapshot_report_js.js"></script>
</head>
<body class="claro">
<div id="div_snapshot_tree"></div>
</body>
</html>

JSON文件:

{
    "snapshot_metadata": {
            "report_end_at": "2017-10-11 02:03:36", 
            "environment_name": "DVINST", 
            "report_start_at": "2017-10-11 01:55:42"
    },
    "versions": [
        {
            "id": "version_001",
            "instances": [
                {
                    "instance_name": "instance1", 
                    "instance_create_date": "2017-09-18 00:17:52", 
                    "connected_site_count": 4, 
                    "admin_server": "t3://tserver:18300", 
                    "instance_id": 2411, 
                    "instance_type": "OSVC", 
                    "instance_created_by": "None", 
                    "site_capacity": 2, 
                    "sites": [
                            {
                            "site_db_id": 395, 
                            "site_name": "zzzz_178", 
                            "site_users": "uc1,uc2,uc3", 
                            "site_id": 89492, 
                            "site_owner": "owner1", 
                            "site_db_name": "site_server2"
                            },
                            {
                            "site_db_id": 395, 
                            "site_name": "site2", 
                            "site_users": "u1, u2, u3", 
                            "site_id": 90447, 
                            "site_owner": "u2", 
                            "site_db_name": "site_server3"
                            }
                    ]
                }
            ]
        }
    ],
    "servers": [
        {
            "status": null, 
            "server_id": 13, 
            "server_name": "db1", 
            "server_type": "database", 
            "mount_points": [], 
            "sites": [], 
            "db_connections_count": 6, 
            "health": null, 
            "admin_servers": null, 
            "db_sites_connected_count": null
        }
    ]
}

控制台出错:

  

dojo.js:8未捕获错误:dijit.tree.ObjectStoreModel:root查询   返回0项,但必须在Object处返回一项   (ObjectStoreModel.js.uncompressed.js:86)atjo.js:8 at when时   (dojo.js:8)在Object.getRoot上   Object._load上的(ObjectStoreModel.js.uncompressed.js:82)   (Tree.js.uncompressed.js:897)在Object.postCreate上   (Tree.js.uncompressed.js:844)在Object.create上   (_WidgetBase.js.uncompressed.js:453)at Object.postscript
  (_WidgetBase.js.uncompressed.js:366)at new(dojo.js:8)
  在snapshot_report_js.js:178

我在这里看不到任何错误,有人可以帮忙吗?

1 个答案:

答案 0 :(得分:1)

乍一看,您的ObjectStoreModel正在尝试查找树的根对象,并且如您指定的那样,其属性id应等于snapshot;您的JSON中没有任何内容与该查询匹配。

其次,JSON数据应该带来树形结构的内容,而你的JSON是非结构化的;请参阅ObjectStoreModel example树数据的外观。如果您有自定义数据结构,那么您需要将其转换为树小部件通过其模型使用。