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.

问题评论:

1  
if(this.subPageArray != undefined && this.title === "Blue")?

答案:

答案1:

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.

答案评论:

    
Nice, this works! And thanks for the explanation on your note, really help me as I am new in json
– da_root
2 hours ago
    
@da_root You are welcome, glad it helps.

答案2:

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>

答案评论:

答案3:

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>

答案评论:

    
This doesn’t provide an answer!!
    
This actually is a viable answer.
    
Well develop the answer, this is just a comment.

答案4:

$.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)


}   
});

答案评论:

原文地址:

https://stackoverflow.com/questions/47753827/filter-nested-json-based-on-parents-values

Add a Comment