如何使用2个值过滤JSON数据

Question

I had a json response:

var json = {
    "map": [{
        "title": "Red",
        "link": "red.html",
        "subPageArray": [{
            "subTitle": "SubLink1",
            "link": "test1.html"
        }, {
            "subTitle": "SubLink1",
            "link": "test9.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"
        }]
    }]
}

How to filter this json with 2 parameters, I want to get json data based on title: Red with subTitle: Sublink1. Currently I had only filtering one value:

$.each(json.map, function(i, val) { 
  if (val["title"] === "Red") { 
     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(".siteMap Content .hii"); 
   } 
});

Is it possible, I tried several way and my browser being unresponsive.

Answer 1

Well, you are already looping over subPageArray , so why not check if this.subPageArray[i].subTitle is what you are looking for?

$.each(json.map, function(i, val) { 
  if (val["title"] === "Red") { 
     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) { 
         // add here a validation that you are on the right subTitle
         data += "<li class='subLevel'><a href='/" + this.subPageArray[i].link + "'>" + this.subPageArray[i].subTitle + "</a></li>"; 
       } 
     } 
     data += "</ul></li>"; 
     $(data).appendTo(".siteMap Content .hii"); 
   } 
});

Or you can always call .map again on a new array.

Answer 2

First step we can filter title and get the list, Next can go for next inner condition to filter the inner title.

Tags can be assigned based on the below condtions.

Check the below code to filter your json variable.

json.map = json.map.filter(function(filterTitle){return filterTitle.title == 'Red'});
json.map = json.map.map(function(filterInnerTitle){
    filterInnerTitle.subPageArray = filterInnerTitle.subPageArray.filter(function(filterSubTitle){
        return filterSubTitle.subTitle === "SubLink1"; 
    });
    return filterInnerTitle;
})
console.log(json);

Answer 3

Hope this helps

 $.each(json.map, function(i, val) { if (val["title"] === "Red" && val.subPageArray != undefined && val.subPageArray.__proto__.constructor.name == "Array") { newSubPageArray = val.subPageArray.filter((value, index)=>{ if(value.subTitle == "SubLink1"){ return true; } else { return false; } }); if(newSubPageArray.length > 0){ var data = "<li class='topLevel'><a href='/" + this.link + "'>" + this.title + "</a><ul>"; $.each(newSubPageArray,function(index, value){ data += "<li class='subLevel'><a href='/" + value.link + "'>" + value.subTitle + "</a></li>" }) data += "</ul></li>"; } $(data).appendTo(".siteMap Content .hii"); } };