根据父值过滤嵌套 JSON答案

【问题标题】：Filter Nested JSON based on parents values根据父值过滤嵌套 JSON
【发布时间】：2018-05-25 00:42:06
【问题描述】：

我只想将基于父级的嵌套 JSON 打印到 HTML，但它始终显示所有值。 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 调用：

$.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");
});

还有 HTML：

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

如果我只想在 HTML 上打印 Blue 作为父级，如何过滤？

小提琴：http://jsfiddle.net/zeef/va0zosuu/

非常感谢所有帮助。

【问题讨论】：

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

标签： javascript html arrays json object

【解决方案1】：

你只需要检查迭代的 item 标题，如果它是 Blue 显示它：

只需在循环中添加此条件：

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

演示：

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>

注意：

否则更好的解决方案是过滤 json.siteMap 数组以仅使用 Array#filter() 获取具有 title:"Blue" 的数组，然后使用 Array#forEach() 对其进行迭代strong> 并显示子项。

【讨论】：

很好，这行得通！感谢您在笔记上的解释，真的帮助我，因为我是 json 新手

【解决方案2】：

以下是根据您的要求工作的sn-p，

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】：

过滤器示例：

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

但您也可以将库用作 lodash 或类似的。

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>

【讨论】：

这没有提供答案！！
这实际上是一个可行的答案。
好吧，开发答案，这只是一个评论。

【解决方案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)


}   
});

【讨论】：