Javascript 基于父值筛选嵌套JSON

我只想将基于父级的嵌套JSON打印成HTML，但它总是显示所有值。 JSON:

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

$。每个（json.siteMap，函数（i，val）{
var data=“
”；
如果（this.subPageArray！=未定义）{//以确保subPageArray存在
对于（i=0；i”；
}
}
数据+=“
”；
$（data.appendTo（“.siteMapContent.hii”）；
});

以及HTML：

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

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

小提琴：

---

非常感谢您的帮助。

您只需查看迭代的

项目

标题，如果它是

蓝色

显示：

只需在循环中添加以下条件：

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

演示：

var json={
“网站地图”：[{
“标题”：“红色”，
“链接”：“red.html”，
“子页面数组”：[{
“副标题”：“子链接1”，
“链接”：“test1.html”
}, {
“副标题”：“子链接2”，
“链接”：“test2.html”
}]
}, {
“标题”：“蓝色”，
“链接”：“blue.html”，
“子页面数组”：[{
“副标题”：“子链接1”，
“链接”：“test1.html”
}, {
“副标题”：“子链接2”，
“链接”：“test2.html”
}]
}, {
“标题”：“绿色”，
“链接”：“green.html”
}, {
“标题”：“黄色”，
“链接”：“yellow.html”，
“子页面数组”：[{
“副标题”：“子链接1”，
“链接”：“test1.html”
}, {
“副标题”：“子链接2”，
“链接”：“test2.html”
}]
}]
};
$.each（json.siteMap，函数（i，val）{
如果（val[“title”]=“Blue”）{
var data=“
”；
如果（this.subPageArray！=未定义）{//以确保subPageArray存在
对于（i=0；i”；
}
}
数据+=“
”；
$（data.appendTo（“.siteMapContent.hii”）；
}
});


过滤器示例：

filter（函数（obj）{return obj.title==“Blue”}）

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


var json={
“网站地图”：[{
“标题”：“红色”，
“链接”：“red.html”，
“子页面数组”：[{
“副标题”：“子链接1”，
“链接”：“test1.html”
}, {
“副标题”：“子链接2”，
“链接”：“test2.html”
}]
}, {
“标题”：“蓝色”，
“链接”：“blue.html”，
“子页面数组”：[{
“副标题”：“子链接1”，
“链接”：“test1.html”
}, {
“副标题”：“子链接2”，
“链接”：“test2.html”
}]
}, {
“标题”：“绿色”，
“链接”：“green.html”
}, {
“标题”：“黄色”，
“链接”：“yellow.html”，
“子页面数组”：[{
“副标题”：“子链接1”，
“链接”：“test1.html”
}, {
“副标题”：“子链接2”，
“链接”：“test2.html”
}]
}]
}
$.each（json.siteMap.filter（函数（val）{return val.title==“Blue”}），函数（i，val）{
var data=“
”；
如果（this.subPageArray！=未定义）{//以确保subPageArray存在
对于（i=0；i”；
}
}
数据+=“
”；
$（data.appendTo（“.siteMapContent.hii”）；
});


以下是根据您的要求编写的工作片段


var json={
“网站地图”：[{
“标题”：“红色”，
“链接”：“red.html”，
“子页面数组”：[{
“副标题”：“子链接1”，
“链接”：“test1.html”
}, {
“副标题”：“子链接2”，
“链接”：“test2.html”
}]
}, {
“标题”：“蓝色”，
“链接”：“blue.html”，
“子页面数组”：[{
“副标题”：“子链接1”，
“链接”：“test1.html”
}, {
“副标题”：“子链接2”，
“链接”：“test2.html”
}]
}, {
“标题”：“绿色”，
“链接”：“green.html”
}, {
“标题”：“黄色”，
“链接”：“yellow.html”，
“子页面数组”：[{
“副标题”：“子链接1”，
“链接”：“test1.html”
}, {
“副标题”：“子链接2”，
“链接”：“test2.html”
}]
}]
}
$.each（json.siteMap，函数（i，val）{
var数据=”；
如果（this.title==“蓝色”）{
data=“
”；
}
如果（this.subPageArray！=未定义）{//以确保subPageArray存在
对于（i=0；i”；
}
}
}
数据+=“
”；
$（data.appendTo（“.siteMapContent.hii”）；
});


$。每个（json.siteMap，函数（i，val）{
如果（this.title==“蓝色”）{
var data=“
”；
如果（this.subPageArray！=未定义）{//以确保subPageArray存在
对于（i=0；i”；
}
}
数据+=“
”；
$（data.appendTo（“.siteMapContent.hii”）；
console.log（数据）
}   
});
如果（this.subPageArray！=未定义&&this.title==“蓝色”）
这不提供答案！！这实际上是一个可行的答案。好的，发展这个答案，这只是一个评论。很好，这很有效！谢谢你在便条上的解释，真的帮助我，因为我是json新手
if (val["title"] === "Blue") {

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


}   
});