Question

我想打印基于父母的嵌套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的父级，如何过滤这个？

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

非常感谢所有帮助。

Answer 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() 并显示子项。

Answer 2

过滤器示例：

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>

Answer 3

根据您的要求，以下是工作代码段，

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>

Answer 4

const defaultProtectedRouteProps: ProtectedRouteProps = {
    isAuthenticated: this.props.state.session.isAuthenticated,
    authenticationPath: '/login',
};

<ProtectedRoute
    {...defaultProtectedRouteProps}
    exact={true}
    path='/'
    component={ProtectedContainer}
/>

根据父级值过滤嵌套的JSON

4 个答案: