Getting each levels of data of complex nested JSON using javascript/jquery

Question

I am trying below code to get each levels of data in a complex JSON data and trying to display on page as below

Level one - Welcome
Level Two - Home, Menu1 ,Menu2 ...
Level Three - Page1, Page2 , Page for parent level -Home
Level Four - Page11, Page12 forparent level Page 1,
similarly Page21, Page22 forparent level Page 2

JSON:

{
    "type": "DIV",
    "content": [{
        "type": "H1",
        "content": ["Welcome"]
    }, {
        "type": "HEADER",
        "content": ["\n            ", {
            "type": "DIV",
            "content": ["\n                ", {
                "type": "NAV",
                "content": [{
                    "type": "DIV",
                    "content": ["\n                                                    ", {
                        "type": "H3",
                        "content": ["Home"]
                    }, {
                        "type": "UL",
                        "content": [{
                            "type": "LI",
                            "content": [{
                                    "type": "A",
                                    "content": ["Page1"],
                                    "attributes": {
                                        "id": "page1",
                                        "class": "tertiaryLink",
                                        "tabindex": "0",
                                        "href": "https://zzzzzz/Page1.html",
                                        "aria-label": "Page1",
                                        "role": "treeitem",
                                        "aria-setsize": "23",
                                        "aria-posinset": "1",
                                        "aria-level": "1"
                                    }
                                },


                                {
                                    "type": "UL",
                                    "content": [{
                                        "type": "LI",
                                        "content": [{
                                            "type": "A",
                                            "content": ["Page11"],
                                            "attributes": {
                                                "id": "page1",
                                                "class": "tertiaryLink",
                                                "tabindex": "0",
                                                "href": "https://zzzzzz/Page11.html",
                                                "aria-label": "Page12",
                                                "role": "treeitem",
                                                "aria-setsize": "23",
                                                "aria-posinset": "11",
                                                "aria-level": "1"
                                            }
                                        }]
                                    }, {
                                        "type": "LI",
                                        "content": [{
                                            "type": "A",
                                            "content": ["Page12"],
                                            "attributes": {
                                                "id": "page12",
                                                "class": "tertiaryLink",
                                                "tabindex": "0",
                                                "href": "https://zzzzzz/Page12.html",
                                                "aria-label": "Page1",
                                                "role": "treeitem",
                                                "aria-setsize": "23",
                                                "aria-posinset": "12",
                                                "aria-level": "1"
                                            }
                                        }]
                                    }]
                                }






                            ]
                        }, {
                            "type": "LI",
                            "content": [{
                                "type": "A",
                                "content": ["Page2"],
                                "attributes": {
                                    "id": "page2",
                                    "class": "tertiaryLink",
                                    "tabindex": "0",
                                    "href": "https://zzzzzz/Page2.html",
                                    "aria-label": "Page2",
                                    "role": "treeitem",
                                    "aria-setsize": "23",
                                    "aria-posinset": "1",
                                    "aria-level": "2"
                                }
                            }]
                        }, {
                            "type": "LI",
                            "content": [{
                                "type": "A",
                                "content": ["Page3"],
                                "attributes": {
                                    "id": "page3",
                                    "class": "tertiaryLink",
                                    "tabindex": "0",
                                    "href": "https://zzzzzz/Page3.html",
                                    "aria-label": "Page3",
                                    "role": "treeitem",
                                    "aria-setsize": "23",
                                    "aria-posinset": "1",
                                    "aria-level": "3"
                                }
                            }]
                        }]
                    }]
                }, {
                    "type": "DIV",
                    "content": ["\n                                                    ", {
                        "type": "H3",
                        "content": ["Menu1"]
                    }, {
                        "type": "UL",
                        "content": [{
                            "type": "LI",
                            "content": [{
                                "type": "A",
                                "content": ["menuPage1"],
                                "attributes": {
                                    "id": "menuPage1",
                                    "class": "tertiaryLink",
                                    "tabindex": "0",
                                    "href": "https://zzzzzz/menu1.html",
                                    "aria-label": "Page1",
                                    "role": "treeitem",
                                    "aria-setsize": "23",
                                    "aria-posinset": "1",
                                    "aria-level": "1"
                                }
                            }]
                        }, {
                            "type": "LI",
                            "content": [{
                                "type": "A",
                                "content": ["menuPage2"],
                                "attributes": {
                                    "id": "menuPage2",
                                    "class": "tertiaryLink",
                                    "tabindex": "0",
                                    "href": "https://zzzzzz/menu2.html",
                                    "aria-label": "menuPage2",
                                    "role": "treeitem",
                                    "aria-setsize": "23",
                                    "aria-posinset": "1",
                                    "aria-level": "2"
                                }
                            }]
                        }, {
                            "type": "LI",
                            "content": [{
                                "type": "A",
                                "content": ["menuPage3"],
                                "attributes": {
                                    "id": "menuPage3",
                                    "class": "tertiaryLink",
                                    "tabindex": "0",
                                    "href": "https://zzzzzz/menu3.html",
                                    "aria-label": "menuPage3",
                                    "role": "treeitem",
                                    "aria-setsize": "23",
                                    "aria-posinset": "1",
                                    "aria-level": "3"
                                }
                            }]
                        }]
                    }]
                }]
            }]
        }]
    }]
}

I tried using the recursive jquery to fetch but couldn't get all levels

Codepen URL for reference:

http://codepen.io/divyar34/pen/oZWGpL

Codepen for expected HTML is close to mentioned below https://codepen.io/divyar34/pen/YZVgzr

Answer 1

Needs more jQuery() . Use jQuery(html, attributes) . Note, not certain if javascript at stacksnippets renders exact expected html ; expected html does not appear at Question, though you should be able to emulate pattern to achieve exact expected result. Substituted duplicate id at "page1" for "page11" , incremented tabindex value of each "A" type, or <a> element.

The approach should use similar amount of code and lines to append html content to document , rather than the laborious task of parsing nested arrays, where elements of array could be both string and object.

 $("#c2") .append( $("<DIV>", { "html": $("<H1>", { "html": "Welcome" }) }), $("<HEADER>", { "html": "\\n", "append": $("<DIV>", { "html": "\\n", "append": $("<NAV>", { "html": $("<DIV>", { "html": "\\n", "append": $("<H3>", { "html": "Home" }) }) }) }) }), $("<UL>", { "html": $("<LI>", { "html": $("<A>", { "html": "Page1", "id": "page1", "class": "tertiaryLink", "tabindex": "0", "href": "https://zzzzzz/Page1.html", "aria-label": "Page1", "role": "treeitem", "aria-setsize": "23", "aria-posinset": "1", "aria-level": "1" }) }) }), $("<UL>", { "html": $("<LI>", { "html": $("<A>", { "html": "Page11", "id": "page11", "class": "tertiaryLink", "tabindex": "1", "href": "https://zzzzzz/Page1.html", "aria-label": "Page1", "role": "treeitem", "aria-setsize": "23", "aria-posinset": "11", "aria-level": "1" }) }) }), $("<UL>", { "html": $("<LI>", { "html": $("<A>", { "html": "Page12", "id": "page12", "class": "tertiaryLink", "tabindex": "2", "href": "https://zzzzzz/Page11.html", "aria-label": "Page11", "role": "treeitem", "aria-setsize": "23", "aria-posinset": "12", "aria-level": "1" }) }) }), $("<DIV>", { "html": $("<H3>", { "html": "Welcome" }) }), $("<UL>", { "html": $("<LI>", { "html": $("<A>", { "html": "menuPage1", "id": "menuPage1", "class": "tertiaryLink", "tabindex": "3", "href": "https://zzzzzz/menu1.html", "aria-label": "Page1", "role": "treeitem", "aria-setsize": "23", "aria-posinset": "1", "aria-level": "1" }) }) }), $("<UL>", { "html": $("<LI>", { "html": $("<A>", { "html": "menuPage2", "id": "menuPage2", "class": "tertiaryLink", "tabindex": "4", "href": "https://zzzzzz/menu2.html", "aria-label": "Page1", "role": "treeitem", "aria-setsize": "23", "aria-posinset": "1", "aria-level": "2" }) }) }), $("<UL>", { "html": $("<LI>", { "html": $("<A>", { "html": "menuPage3", "id": "menuPage3", "class": "tertiaryLink", "tabindex": "5", "href": "https://zzzzzz/menu1.html", "aria-label": "Page1", "role": "treeitem", "aria-setsize": "23", "aria-posinset": "1", "aria-level": "1" }) }) }) ) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> <div id="c2"></div>