简体   繁体   English

如何在JSON中获取子项

[英]How to get Child Items in JSON

I have a JSON format 我有JSON格式

{
    "identifier": "id",
    "items": [{
        "id": 0,
        "duration": 1,
        "startdate": "2011-11-24",
        "percentage": 0,
        "name": "The quick brown fox jumps over the lazy dog",
        "taskOwner": "RAK",
        "children": [{
            "id": 1,
            "duration": 20,
            "startdate": "2011-11-26",
            "percentage": 40,
            "name": "Aquire fox",
            "taskOwner": "Fox",
            "previousTaskId": "",
            "children": [{
                "id": 2,
                "duration": 40,
                "startdate": "2011-11-28",
                "percentage": 70,
                "name": "Obtain Dog",
                "taskOwner": "Dog",
                "previousTaskId": "1",
                "children": [{
                    "id": 3,
                    "duration": 60,
                    "startdate": "2011-11-25",
                    "percentage": 80,
                    "name": "Fox does his jump",
                    "taskOwner": "jump",
                    "previousTaskId": "3",
                    "children": []
                }]
            }]
        }]
    }]
}

I'm trying to access it with the following code. 我正在尝试使用以下代码进行访问。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="${page.url.context}/res/components/gant_chart/css/claro.css">
    <style type="text/css">
        @import "${page.url.context}/res/components/gant_chart/css/gantt.css";
    </style>
    <script src='${page.url.context}/res/components/gant_chart/dojo/dojo.js'></script>
    <script type="text/javascript">
        setTimeout(function () {
            var temp = eval('(${results})'); //CALLING JSON DATA
            dojoConfig = {
                async: false,
                parseOnLoad: true
            };
            dojo.require("dojo.parser");
            dojo.require("dojox.gantt.GanttChart");
            dojo.require("dojo._base.declare");
            dojo.require("dojo.query");
            dojo.require("dojox.gantt.GanttProjectItem");
            dojo.require("dojox.gantt.GanttTaskItem");
            dojo.require("dojo.dom");
            dojo.require("dojo.domReady");
            dojo.addOnLoad(function () {
                var ganttChart = new dojox.gantt.GanttChart({
                    readOnly: true,
                    height: 400, // optional: chart height in pixel, default is 400px
                    width: 1000,
                    withResource: true
                }, "gantt");

                for (var i = 0; i < temp.items.length; i++) {
                    var projectItem = temp.items[i];
                    var startDate = projectItem.startdate.split("-");
                    var project = new dojox.gantt.GanttProjectItem({
                        id: projectItem.id,
                        name: projectItem.name,
                        startDate: new Date(startDate[0], (parseInt(startDate[1]) - 1), startDate[2]),
                    });

                    var Tasks = projectItem.tasks;
                    for (var j = 0; j < Tasks.length; j++) {
                        var Task = Tasks[j];
                        var starttime = Task.startdate.split("-")
                        var task = new dojox.gantt.GanttTaskItem({
                            id: Task.id,
                            name: Task.name,
                            startTime: new Date(starttime[0], (parseInt(starttime[1]) - 1), starttime[2]),
                            duration: Task.duration,
                            percentage: Task.percentage,
                            previousTaskId: Task.previousTaskId,
                            taskOwner: Task.taskOwner
                        });
                        project.addTask(task);
                    }
                    ganttChart.addProject(project);
                }
                ganttChart.init();
            });
        }, 0); //end of dojo.addonload function
    </script>
</head>
<body class="claro">
    <div class="dashlet site-welcome">
        <div class="title">Gantt chart</div>
        <div class="body">
            <div class="ganttContent" style="margin:10px;">
                <div id="gantt"></div>
            </div>
        </div>
    </div>
</body>
</html>

Where I am doing wrong? 我在哪里做错了? The code is not returning the child classes as I would like. 代码没有返回我想要的子类。 Does anybody have suggestions? 有人有建议吗?

You are trying to get projectItem.tasks -- there is no tasks property inside that array. 您正在尝试获取projectItem.tasks该数组内没有tasks属性。 Target .children instead. 改为目标.children

First thing I spotted is you use 我发现的第一件事是您使用

var Tasks = projectItem.tasks;

but that object does not exist. 但该对象不存在。

I believe it should be: 我认为应该是:

var Tasks = projectItem.children;

Okay, you owe me doughnuts after all this, but mess around with something like this: 好吧,这一切你都欠我甜甜圈,但是像这样混在一起:

var recurseChildren = function(parent) {

  var tasks = parent.children;
  for (var j = 0; j < tasks.length; j++) {
    var task = tasks[j];
    var startTime = task.startdate.split("-")
    var taskItem = new dojox.gantt.GanttTaskItem({
      id: task.id,
      name: task.name,
      startTime: new Date(startTime[0], (parseInt(startTime[1]) - 1), startTime[2]),
      duration: task.duration,
      percentage: task.percentage,
      previousTaskId: task.previousTaskId,
      taskOwner: task.taskOwner
    });
    project.addTask(taskItem);

    // Keynote here -- now we repeat ourselves for each child layer.
    recurseChildren(task);
  }
}

var ganttChart = new dojox.gantt.GanttChart({
  readOnly: true,
  height: 400, 
  width: 1000,
  withResource: true
}, "gantt");

for (var i = 0; i < temp.items.length; i++) {
  var projectItem = temp.items[i];
  var startDate = projectItem.startdate.split("-");
  var project = new dojox.gantt.GanttProjectItem({
    id: projectItem.id,
    name: projectItem.name,
    startDate: new Date(startDate[0], (parseInt(startDate[1]) - 1), startDate[2]),
  });
  recurseChildren(projectItem);
  ganttChart.addProject(project);
}
ganttChart.init();

Note: there is a 99% chance this isn't going to work at first - I don't have your environment to test it out and play with it. 注意:一开始有99%的可能性是行不通的-我没有您的环境来测试和使用它。 However, try to understand what the code is doing and work with it from there. 但是,请尝试了解代码在做什么,然后从那里开始使用它。 I am pointing you in the right direction. 我为您指明了正确的方向。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM