CODEWITHSUNDEEP
javascripthtmlarraysjsonobject
da_root
da_root

Reputation: 364

Filter Nested JSON based on parents values

I want to print to HTML the nested JSON based on parents only, but it always shows all value. JSON:

var json = {
    "siteMap": [{
        "title": "Red",
            "link": "red.html",
            "subPageArray": [{
            "subTitle": "SubLink1",
            "link": "test1.html"
        }, {
            "subTitle": "SubLink2",
            "link": "test2.html"
        }]
    }, {
        "title": "Blue",
            "link": "blue.html",
            "subPageArray": [{
            "subTitle": "SubLink1",
            "link": "test1.html"
        }, {
            "subTitle": "SubLink2",
            "link": "test2.html"
        }]
    }, {
        "title": "Green",
            "link": "green.html"
    }, {
        "title": "Yellow",
            "link": "yellow.html",
            "subPageArray": [{
            "subTitle": "SubLink1",
            "link": "test1.html"
        }, {
            "subTitle": "SubLink2",
            "link": "test2.html"
        }]
    }]
}

JavaScript call:

$.each(json.siteMap, function (i, val) {
    var data="<li class='topLevel'><a href='/" + this.link + "'>" + this.title + "</a><ul>";
    if(this.subPageArray!=undefined){  // to make sure subPageArray exists
       for (i = 0; i < this.subPageArray.length; ++i) {
            data += "<li class='subLevel'><a href='/" + this.subPageArray[i].link + "'>" + this.subPageArray[i].subTitle + "</a></li>";
       }
    }
       data+="</ul></li>";

        $(data).appendTo(".siteMapContent .hii");
});

And the HTML:

<div class="siteMapContent">
    <ul class="hii"></ul>
</div>

How to filter this, if I want to print only Blue as the parent on HTML?

Fiddle: http://jsfiddle.net/zeef/va0zosuu/

Really appreciated with all helps.

Upvotes: 1

Views: 638

Answers (4)

Pianistprogrammer
Pianistprogrammer

Reputation: 637

$.each(json.siteMap, function (i, val) {
if(this.title === "Blue"){
 var data="<li class='topLevel'><a href='/" + this.link + "'>" + this.title + "</a><ul>";
    if(this.subPageArray!=undefined){  // to make sure subPageArray exists
       for (i = 0; i < this.subPageArray.length; ++i) {
            data += "<li class='subLevel'><a href='/" + this.subPageArray[i].link + "'>" + this.subPageArray[i].subTitle + "</a></li>";
       }
    }
       data+="</ul></li>";


     $(data).appendTo(".siteMapContent .hii");
     console.log(data)


}   
});

Upvotes: 0

Mos&#232; Raguzzini
Mos&#232; Raguzzini

Reputation: 15841

Example with filter:

json.siteMap.filter(function(obj){return obj.title == "Blue"})

But you can also use library as lodash or similar.

var json = {
    "siteMap": [{
        "title": "Red",
            "link": "red.html",
            "subPageArray": [{
            "subTitle": "SubLink1",
            "link": "test1.html"
        }, {
            "subTitle": "SubLink2",
            "link": "test2.html"
        }]
    }, {
        "title": "Blue",
            "link": "blue.html",
            "subPageArray": [{
            "subTitle": "SubLink1",
            "link": "test1.html"
        }, {
            "subTitle": "SubLink2",
            "link": "test2.html"
        }]
    }, {
        "title": "Green",
            "link": "green.html"
    }, {
        "title": "Yellow",
            "link": "yellow.html",
            "subPageArray": [{
            "subTitle": "SubLink1",
            "link": "test1.html"
        }, {
            "subTitle": "SubLink2",
            "link": "test2.html"
        }]
    }]
}

$.each(json.siteMap.filter(function(val){return val.title == "Blue"}), function (i, val) {
    var data="<li class='topLevel'><a href='/" + this.link + "'>" + this.title + "</a><ul>";
    if(this.subPageArray!=undefined){  // to make sure subPageArray exists
       for (i = 0; i < this.subPageArray.length; ++i) {
            data += "<li class='subLevel'><a href='/" + this.subPageArray[i].link + "'>" + this.subPageArray[i].subTitle + "</a></li>";
       }
    }
       data+="</ul></li>";

        $(data).appendTo(".siteMapContent .hii");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="siteMapContent">
    <ul class="hii"></ul>
</div>

Upvotes: 0

Nitin Dhomse
Nitin Dhomse

Reputation: 2612

The following is working snippet as per your requirement,

var json = {
    "siteMap": [{
        "title": "Red",
            "link": "red.html",
            "subPageArray": [{
            "subTitle": "SubLink1",
            "link": "test1.html"
        }, {
            "subTitle": "SubLink2",
            "link": "test2.html"
        }]
    }, {
        "title": "Blue",
            "link": "blue.html",
            "subPageArray": [{
            "subTitle": "SubLink1",
            "link": "test1.html"
        }, {
            "subTitle": "SubLink2",
            "link": "test2.html"
        }]
    }, {
        "title": "Green",
            "link": "green.html"
    }, {
        "title": "Yellow",
            "link": "yellow.html",
            "subPageArray": [{
            "subTitle": "SubLink1",
            "link": "test1.html"
        }, {
            "subTitle": "SubLink2",
            "link": "test2.html"
        }]
    }]
}

$.each(json.siteMap, function (i, val) {
 var data = "";
if(this.title == "Blue"){
     data="<li class='topLevel'><a href='/" + this.link + "'>" + this.title + "</a><ul>";
    }
    if(this.subPageArray!=undefined){  // to make sure subPageArray exists
       for (i = 0; i < this.subPageArray.length; ++i) {
      
       if(this.title == "Blue"){
      
          data += "<li class='subLevel'><a href='/" + this.subPageArray[i].link + "'>" + this.subPageArray[i].subTitle + "</a></li>";
       }
         
       }
    }
       data+="</ul></li>";

        $(data).appendTo(".siteMapContent .hii");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="siteMapContent">
    <ul class="hii"></ul>
</div>

Upvotes: 0

cнŝdk
cнŝdk

Reputation: 32145

Well you just need to check upon the iterated item title, if it's Blue show it:

Just add this condition in your loop:

if (val["title"] === "Blue") {

Demo:

var json = {
  "siteMap": [{
    "title": "Red",
    "link": "red.html",
    "subPageArray": [{
      "subTitle": "SubLink1",
      "link": "test1.html"
    }, {
      "subTitle": "SubLink2",
      "link": "test2.html"
    }]
  }, {
    "title": "Blue",
    "link": "blue.html",
    "subPageArray": [{
      "subTitle": "SubLink1",
      "link": "test1.html"
    }, {
      "subTitle": "SubLink2",
      "link": "test2.html"
    }]
  }, {
    "title": "Green",
    "link": "green.html"
  }, {
    "title": "Yellow",
    "link": "yellow.html",
    "subPageArray": [{
      "subTitle": "SubLink1",
      "link": "test1.html"
    }, {
      "subTitle": "SubLink2",
      "link": "test2.html"
    }]
  }]
};

$.each(json.siteMap, function(i, val) {
  if (val["title"] === "Blue") {
    var data = "<li class='topLevel'><a href='/" + this.link + "'>" + this.title + "</a><ul>";
    if (this.subPageArray != undefined) { // to make sure subPageArray exists
      for (i = 0; i < this.subPageArray.length; ++i) {
        data += "<li class='subLevel'><a href='/" + this.subPageArray[i].link + "'>" + this.subPageArray[i].subTitle + "</a></li>";
      }
    }
    data += "</ul></li>";

    $(data).appendTo(".siteMapContent .hii");
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div class="siteMapContent">
  <ul class="hii"></ul>
</div>

Note:

Otherwise a better solution would be to filter the json.siteMap array to get only the ones with title:"Blue" using Array#filter() and then iterate over it with Array#forEach() and show the sub-items.

Upvotes: 1

Related Questions