convert multilevel nested array using into json using javascript

Question

I have the code, where I load data from a csv file and get the data by grouping data using D3.

The code I wrote is:

                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);

What I was trying to do was convert the obtained result to json format using the following code which I found online: These are the following I am trying to do:

1) I am trying to get the Start Time End Time. I am calculating the Start time by adding the Duration. 2) The array that is obtained is coming as nested key values pair. I am trying to convert them to JSON data so that I can just pass this into the var treeData Gantt chart of anychart.js.

The following is the JSON data what I am trying to achieve and I got the data that I want till children's name:1, for actualStart and actualEnd I am getting undefined as the value: 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}, .... ] .... Could someone kindly suggest what I need to change to get the actualStart and actualEnd data.

Thank you.

I have included the sample csv data:

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

Could you provide us an example of .csv data particularly you use to test this code? AnyGantt can work with CSV data, so probably there's no need for parsing CSV to JSON. In any case, we need more details about your raw .csv data (better a piece of data as an example). — AnyChart Support
– AnyChart Support, Commented Dec 6, 2017 at 7:14

AnyChart Support · Accepted Answer · 2017-12-07 09:51:31Z

In this case, you need some custom data formatting. Below you may find the code which takes the .csv data you provided us before, then parses it, groups and formats. After that creates gantt project chart. This code helps to get the data structure you want.

//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;
}

Below is a screenshot of the chart which is built by this code.

Thank you very much. This has been so helpful. Now I get how I can manipulate data.

Collectives™ on Stack Overflow

convert multilevel nested array using into json using javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related