Question

I have a JSON object that is a nested array that is of the following form:

{
    "name": "Math",
    "children": [
        {
            "name": "Trigonometry",
            "children": [
                {
                    "name": "Right Triangles and an Introduction to Trigonometry",
                    "children": [
                        {
                            "name": "The Pythagorean Theorem",
                            "children": [
                                {
                                    "name": "The Pythagorean Theorem",
                                    "size": 30
                                },
                                {
                                    "name": "Pythagorean Triples",
                                    "size": 52
                                },
                                {
                                    "name": "Converse of the Pythagorean Theorem",
                                    "size": 13
                                }
                            ]
                        }
                    ]
                }
            ]
        },
        {
            "name": "Algebra",
            "children": [
                {
                    "name": "Equations and Functions",
                    "children": [
                        {
                            "name": "Variable Expressions",
                            "children": [
                                {
                                    "name": "Evaluate Algebraic Expressions",
                                    "size": 26
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

The full array is actually much larger and can be seen here. I’m using it to build interactive graphs and charts using D3.js (or perhaps other libraries). Because it’s so large, I’d like to be able to split the array by branch. In other words, to carve out particular branches of the array.

For instance, is there a way to just pull out the node “Trigonometry” and all its children? Or “Algebra” and all its children? Then “Trigonometry” or “Algebra” would become the new root or parent node.

Answer 1

There is no built-in way to do something like this, although the comment about a JSON query language might give you the right work-around.

Really, the problem is that you have structured your data in a way that makes it very hard to use. If instead of

{
    name: "key",
    children: [...]
}

you just did

{
    "key": [...]
}

then you could simply do myObject["key"] to get the array you want.

For example:

var math = {
    "Trigonometry": {
        "Right Triangles and an Introduction to Trigonometry": {
            "The Pythagorean Theorem": {
                "The Pythagorean Theorem": 30,
                "Pythagorean Triples": 52,
                "Converse of the Pythagorean Theorem": 13
            }
        }
    },
    "Algebra": {
        "Equations and Functions": {
            "Variable Expressions": {
                "Evaluate Algebraic Expressions": 26
            }
        }
    }
};
var trigonometry = math["Trigonometry"];
var expressionsAndFunctions = math["Algebra"]["Expressions and Functions"];

As a bonus, that’s much shorter!