Populate child object in Json

Question

I am trying to populate child object from below json on basis of parent id, but facing some issue, I need your help here. I am new in Json so please suggest me some solution, I wand to show child1, child2 child3 if page id is 2, I am trying to populate child object from below json on basis of parent id, but facing some issue, I need your help here. I am new in Json so please suggest me some solution, I wand to show child1, child2 child3 if page id is 2

[
    {
        "id": "2",
        "slug": "parent",
        "title": "Parent",
        "subcategories": [
            {
                "id": "12",
                "slug": "child1",
                "title": "child1"
            },
            {
                "id": "14",
                "slug": "child2",
                "title": "child2"
            },
            {
                "id": "15",
                "slug": "child3",
                "title": "child3"
            },
            {
                "id": "16",
                "slug": "child4",
                "title": "child4"
            }
        ]
    },
    {
        "id": "11",
        "slug": "parent2",
        "title": "Parent2",
        "subcategories": [
            {
                "id": "32",
                "slug": "child1",
                "title": "child1"
            },
            {
                "id": "33",
                "slug": "child2",
                "title": "child3"
            }
        ]
    }
]

[
    {
        "id": "2",
        "slug": "parent",
        "title": "Parent",
        "subcategories": [
            {
                "id": "12",
                "slug": "child1",
                "title": "child1"
            },
            {
                "id": "14",
                "slug": "child2",
                "title": "child2"
            },
            {
                "id": "15",
                "slug": "child3",
                "title": "child3"
            },
            {
                "id": "16",
                "slug": "child4",
                "title": "child4"
            }
        ]
    },
    {
        "id": "11",
        "slug": "parent2",
        "title": "Parent2",
        "subcategories": [
            {
                "id": "32",
                "slug": "child1",
                "title": "child1"
            },
            {
                "id": "33",
                "slug": "child2",
                "title": "child3"
            }
        ]
    }
]

$.getJSON("data.json" , function(json) {
    $.each(json,function(i, value){
        $.each(value.subcategories, function(index, obj){
            $('#list-category-slider').append('<div class="item"><a href="/' + obj.slug + '">' + obj.title + '</a></div>');
        })
    });
});

Answer 1

First, filter array to get current page based on id. And iterate over the properties to create the list. For test, pageId is set to 2.

  $(function(){ var json = [ { "id": "2", "slug": "parent", "title": "Parent", "subcategories": [ { "id": "12", "slug": "child1", "title": "child1" }, { "id": "14", "slug": "child2", "title": "child2" }, { "id": "15", "slug": "child3", "title": "child3" }, { "id": "16", "slug": "child4", "title": "child4" } ] }, { "id": "11", "slug": "parent2", "title": "Parent2", "subcategories": [ { "id": "32", "slug": "child1", "title": "child1" }, { "id": "33", "slug": "child2", "title": "child3" } ] } ] var pageId = 2; var currentPage = json.filter(function(el){ return el.id == pageId; })[0]; $.each(currentPage.subcategories, function(index, obj){ $('#list-category-slider').append('<div class="item"><a href="/' + obj.slug + '">' + obj.title + '</a></div>'); }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='list-category-slider'> </div>