JavaScript -- split off one branch of a hierarchical array or JSON object

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.

Check out [Is there a query language for JSON?](http://stackoverflow.com/questions/777455/is-there-a-query-language-for-json) — Richard JP Le Guen, Sep 23 '11 at 17:23
[There is no such thing as a JSON Object](http://benalman.com/news/2010/03/theres-no-such-thing-as-a-json/) Are you asking how to find the appropriate sub-object within javascript code? — James Montagne, Sep 23 '11 at 17:28

score 1 · Accepted Answer · answered Sep 23 '11 at 17:30

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!

score 0 · Answer 2 · answered Sep 23 '11 at 17:34

Array's splice function should do it. What that will do is remove the element at a given index and return it.

If you just want a shortcut to a specific branch, couldn't you also just use

var trig = tree['trigonometry'];

to get there. This wouldn't change the original object, buy will give you a simpler way to access nodes deep inside.

JavaScript -- split off one branch of a hierarchical array or JSON object

2 Answers2