Trying to iterate Json into a Javascript array to then feed into a Treant js chart

Question

I'm trying to iterate a Json file using Javascript / jQuery (I've got no control over the Json file hence the reason I can't just import it straight into Treant js), convert it into a Javascript array, and then feed it into Treant js.

The problem I'm getting is it doesn't seem to understand the parental linking. This is my code:

var config = {
    container: "#myChart",
    rootOrientation: 'WEST',
    levelSeparation: 100,
    siblingSeparation: 10,
    connectors: {
        type: 'stright',
        style: {
            "stroke": '#c7c7c7',
            "stroke-width": 1
        }
    },
    node: {
        HTMLclass: 'nodeStyle'
    },
}

chart_config = [config];

$.getJSON('myFile.json', function(data) {
    rootLevel = {};
    rootLevel["text"] = { "name": data.something };
    rootLevel["image"] = data.somethingImage;

    chart_config.push(rootLevel);

    $.each(data.root.secondLevel, function(i, v) {
        var iName = v.something;
        var iKey = iName + "-" + i;
        window[iKey] = {};
        window[iKey]["parent"] = rootLevel;
        window[iKey]["text"] = { "name": iName };
        window[iKey]["stackChildren"] = true;

        chart_config.push(window[iKey]);
    });
}).done(function() {
    new Treant(chart_config);
});

I get the error

Uncaught TypeError: Cannot read property 'join' of undefined
at Tree.getPathString (Treant.js:1040)
at Tree.setConnectionToParent (Treant.js:892)
at Tree.positionNodes (Treant.js:817)
at Tree.positionTree (Treant.js:509)
at Treant.js:533

I think what's happening is because I'm not declaring the array all in one go:

EG:

rootLevel = {
    text: {
        name: "stuff",
    },
},
secondLevel = {
    parent: rootLevel,
    text: {
        name: "things",
    },
} //..... etc

It's not understanding the parental linking.

As way of a test, I've also tried

window[iKey]["parent"] = chart_config[1];

But that throws the same error.

If I do a console.log(chart_config) at the end, the array looks fine. I dare say the answer is easy, but it escapes me.

Thanks in advance.

Mouser · Accepted Answer · 2020-01-10 11:32:46Z

1

Dived into the getPathString code at line 1040 at gitHub

You made a typo:

type: 'stright',=> type: 'straight',

From treant.js:

else {  // NORMAL CHILDREN
    if ( connType === "step" ) {
        pathString = ["M", sp, 'L', p1, 'L', p2, 'L', ep];
    }
    else if ( connType === "curve" ) {
        pathString = ["M", sp, 'C', p1, p2, ep ];
    }
    else if ( connType === "bCurve" ) {
        pathString = ["M", sp, 'Q', p1, pm, 'T', ep];
    }
    else if (connType === "straight" ) {
        pathString = ["M", sp, 'L', sp, ep];
    }
}
return pathString.join(" ");

answered Jan 10, 2020 at 11:32

Mouser

13.3k3 gold badges30 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Strontium_99 Over a year ago

Oh my God. What a fool I am. This has been driving me nuts, and it had nothing to do with what I thought it was. Thanks dude.

Mouser Over a year ago

You are welcome. Because this is a typo, it should be closed/deleted!

Strontium_99 Over a year ago

K dude. Thanks again.

Collectives™ on Stack Overflow

Trying to iterate Json into a Javascript array to then feed into a Treant js chart

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related