【问题标题】:convert multilevel nested array using into json using javascript使用javascript将多级嵌套数组转换为json
【发布时间】:2017-12-05 15:51:01
【问题描述】:

我有代码,我从 csv 文件加载数据并通过使用 D3 对数据进行分组来获取数据。

我写的代码是:

                d3.csv("data/data2.csv", function(data1) {      

                  var workStation = 
                                {"key":"Data","values":
                                d3.nest()
                                .key(function(d) { return d.WorkStation_Id; })
                                .key(function(d) { return d.Order_Id; })
                                .rollup(function(v) {
                                    return v.map(function(c){
                                        return { "actualStart": convertscheduledtime(c.ScheduledTime),"rowHeight": 30, "actualEnd":c.Duration*1000+convertscheduledtime(c.ScheduledTime), "name":c.Order_Id};
                                    });
                                }).entries(data1)};

                var d2= [{"name":"Data", "children":workStation.values.map( function(major){  
                        return {
                            "name": major.key,
                            "children":major.values.map( function(Order_Id){
                                return{
                                    "name" : Order_Id.key,
                                    "actualStart" : Order_Id.values.actualStart,
                                    "actualEnd" : Order_Id.values.actualEnd
                                };
                            })
                            };
                        })
                    }];

    });
    console.log(d2);

我试图做的是使用我在网上找到的以下代码将获得的结果转换为 json 格式: 这些是我正在尝试做的事情:

1) 我正在尝试获取开始时间结束时间。我通过添加持续时间来计算开始时间。 2) 获得的数组以嵌套键值对的形式出现。我正在尝试将它们转换为 JSON 数据,以便我可以将其传递到 anychart.js 的 var treeData 甘特图中。

以下是我想要实现的 JSON 数据,我得到了我想要的数据,直到孩子的名字:1,对于 actualStart 和 actualEnd 我得到未定义的值: parent : 10A, children:[{ name:1, actualStart:18332233333, actualEnd:12343434444}, { name:2, actualStart:18332233898, actualEnd:12343434998}, .... ], parent : 10B, children: [{ name:1, actualStart:18332233333, actualEnd:12343434444}, { name:2, actualStart:18332233898, actualEnd:12343434998}, .... ] .... 有人可以建议我需要更改什么来获取实际开始和实际结束数据。

谢谢。

我已包含示例 csv 数据:

ScheduledTime,WorkStation_Id,Order_Id,Duration(seconds)  

01.01.2016 00:00:00,10A,1,15
01.01.2016 00:00:15,10A,1,25
01.01.2016 00:00:35,10A,1,10
01.01.2016 00:00:45,10A,2,10
01.01.2016 00:00:55,10A,2,10
01.01.2016 00:01:05,10B,1,20
01.01.2016 00:01:25,10B,1,10
01.01.2016 00:01:35,10B,2,20
.....

【问题讨论】:

  • 您能否提供一个 .csv 数据示例,特别是您用于测试此代码的示例? AnyGantt 可以处理 CSV 数据,因此可能不需要将 CSV 解析为 JSON。无论如何,我们需要有关您的原始 .csv 数据的更多详细信息(以更好的数据为例)。
  • 我包含了 csv 原始数据的一部分。请看一下

标签: javascript arrays json d3.js anychart


【解决方案1】:

在这种情况下,您需要一些自定义数据格式。您可以在下面找到获取您之前提供给我们的 .csv 数据的代码,然后对其进行解析、分组和格式。之后创建甘特图项目图。这段代码有助于得到你想要的数据结构。

//parse .csv data and group by WorkStation_Id
d3.csv("data.csv", function (data1) {
    var workStation = d3.nest()
        .key(function (d) {
            return d.WorkStation_Id;
        })
        .entries(data1);

    //get formatted data as a tree
    var formattedData = formatData(workStation);
    console.log(formattedData);

    //set formatted data as a tree
    var treeData = anychart.data.tree(formattedData, "as-tree");
    // chart type
    chart = anychart.ganttProject();

    // set data for the chart
    chart.data(treeData);

    // set container id for the chart
    chart.container('container').draw();

    // Fit all visible data to timeline.
    chart.fitAll();
});

//helper function to format data in apropriate way
//to set to the gantt chart
function formatData(data) {

    var outputData = [];

    data.forEach(function (item) {
        var itemObj = {};
        itemObj['name'] = item['key'];
        itemObj['children'] = [];

        var childs = item['values'];

        for (var i = 0; i < childs.length; i++) {
            var childObj = {};
            childObj['name'] = 'Order ID: ' + childs[i]['Order_Id'] + '-' + i;
            childObj['actualStart'] = new Date(childs[i]['ScheduledTime']).getTime();
            childObj['actualEnd'] = childObj['actualStart'] + childs[i]['Duration(seconds)'] * 1000;
            childObj['Order_Id'] = childs[i]['Order_Id'];
            itemObj['children'].push(childObj);
        }
        outputData.push(itemObj);
    });
    return outputData;
}

以下是此代码构建的图表的屏幕截图。

【讨论】:

  • 非常感谢。这很有帮助。现在我知道如何操作数据了。
猜你喜欢
  • 2018-12-20
  • 2021-03-07
  • 1970-01-01
  • 2021-04-06
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-09-20
  • 2019-10-13
相关资源
最近更新 更多