Converting a CSV file into a JSON so as to get tree like structure for creating a D3 categorical tree

Question

I have a csv file in the format:

"","Sequence","Paths","sequence_length"
"1","Social -> Social -> Social -> Social -> Social -> Social -> Social -> Social",29,8
"2","Social -> Social -> Social -> Social -> Social -> Social -> Social",30,7
"3","Social -> Social -> Social -> Social -> Social -> Social",40,6
"4","Social -> Social -> Social -> Social -> Social",71,5
"5","Social -> Social -> Social -> Social",156,4
"6","Social -> Social -> Social",273,3
"7","Social -> Social -> SEO",40,3
"8","Social -> Social",729,2
"9","Social -> SEO -> Social",51,3
"10","Social -> SEO",180,2
"11","Social -> SEM",56,2

I want to convert this into a JSON tree hierarchy as follows:

{
"name": "Social",
"children": [{
    "name": "Social",
    "children": [{
        "name": "Social",
        "children": [{
            "name": "Social",
            "children": [{
                "name": "Social",
                "children": [{
                    "name": "Social",
                    "children": [{
                        "name": "Social",
                        "children": [{
                            "name": "Social",
                            "Path": 29
                        }]
                    }]
                }]
            }]
        }]
    }]
}]
}

Where Each Touch Point viz. 'Social' represented by -> in CSV file at each line represents the child of the previous and the Paths is added to the last node.

I am trying to split the Social things in one array as

data.forEach(function(d){
var x =  d.Sequence.split(' -> ');

and then using the this x to parse into JSON.Could anyone please help me with it.Thanks !

Answer 1

I did it only for the first row (not the head of the csv), like your example of the result, I think it does what you want.

So you just make an array of items and pass each through parseItem. Notice: your final result is not an object, it's an array.

It's not really needed, but I made it a recursive function

All the .innerHTML ... is just to show wha't going on. Remove those lines if you wish.

You can take it from here, right?

<div id="log"></div>
<hr/>
<div id="result"></div>
<script>
    var myitem = ["1", "Social -> Social -> Social -> Social -> Social -> Social -> Social -> Social", 29, 8];

    function parseItem(item) {
        // var id = item[0];
        var paths = item[1];
        var value = item[2];
        // var length =  item[3];
        var splitPath = paths.split(' -> ');

        var threeDpath = path2tree(splitPath, value);
        return threeDpath;

    }

    // recursive function
    function path2tree(paths, value) {
        // for testing and trying to understand what happens
        document.getElementById('log').innerHTML += JSON.stringify(paths) + '<br/>';

        if (paths.length == 1) { // this will only be true the last time
            return [{
                "name": paths[0],
                "Path": value
            }];
        } else {
            // splice paths[0], send the rest to the recursive function
            var path = paths.splice(0, 1);
            return [{
                "name": path[0],
                "children": path2tree(paths, value)
            }];
        }
    }

    window.onload = function() {
        var threeDpath = parseItem(myitem);
        document.getElementById('result').innerHTML = JSON.stringify(threeDpath);
    }
</script>