2017-08-17 79 views
0

我想在父ID的基础上从下面的JSON填充子对象,但面临一些问题,我需要你的帮助。我是Json的新人,所以请给我建议一些解决方案,我魔杖显示child1,child2 child3如果页面ID是2,我想从父母id的基础上填充子对象从下面的json,但面临一些问题,我需要你帮助这里。我以JSON很新,所以请建议我一些解决方案,我的魔杖展示child1,的child2 child3如果页面ID为2在Json中填充子对象

[ 
    { 
     "id": "2", 
     "slug": "parent", 
     "title": "Parent", 
     "subcategories": [ 
      { 
       "id": "12", 
       "slug": "child1", 
       "title": "child1" 
      }, 
      { 
       "id": "14", 
       "slug": "child2", 
       "title": "child2" 
      }, 
      { 
       "id": "15", 
       "slug": "child3", 
       "title": "child3" 
      }, 
      { 
       "id": "16", 
       "slug": "child4", 
       "title": "child4" 
      } 
     ] 
    }, 
    { 
     "id": "11", 
     "slug": "parent2", 
     "title": "Parent2", 
     "subcategories": [ 
      { 
       "id": "32", 
       "slug": "child1", 
       "title": "child1" 
      }, 
      { 
       "id": "33", 
       "slug": "child2", 
       "title": "child3" 
      } 
     ] 
    } 
] 

[ 
    { 
     "id": "2", 
     "slug": "parent", 
     "title": "Parent", 
     "subcategories": [ 
      { 
       "id": "12", 
       "slug": "child1", 
       "title": "child1" 
      }, 
      { 
       "id": "14", 
       "slug": "child2", 
       "title": "child2" 
      }, 
      { 
       "id": "15", 
       "slug": "child3", 
       "title": "child3" 
      }, 
      { 
       "id": "16", 
       "slug": "child4", 
       "title": "child4" 
      } 
     ] 
    }, 
    { 
     "id": "11", 
     "slug": "parent2", 
     "title": "Parent2", 
     "subcategories": [ 
      { 
       "id": "32", 
       "slug": "child1", 
       "title": "child1" 
      }, 
      { 
       "id": "33", 
       "slug": "child2", 
       "title": "child3" 
      } 
     ] 
    } 
] 

$.getJSON("data.json" , function(json) { 
    $.each(json,function(i, value){ 
     $.each(value.subcategories, function(index, obj){ 
      $('#list-category-slider').append('<div class="item"><a href="/' + obj.slug + '">' + obj.title + '</a></div>'); 
     }) 
    }); 
}); 
+0

对不起错字的错误,这将是孩子 – Sajal

+0

您的代码为我工作。 –

回答

1

首先,滤波器阵列以获得基于ID当前页面。并遍历这些属性来创建列表。对于测试,PAGEID设置为2

$(function(){ 
 
    var json = 
 
\t [ 
 
\t \t { 
 
\t \t \t "id": "2", 
 
\t \t \t "slug": "parent", 
 
\t \t \t "title": "Parent", 
 
\t \t \t "subcategories": [ 
 
\t \t \t \t { 
 
\t \t \t \t \t "id": "12", 
 
\t \t \t \t \t "slug": "child1", 
 
\t \t \t \t \t "title": "child1" 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t \t "id": "14", 
 
\t \t \t \t \t "slug": "child2", 
 
\t \t \t \t \t "title": "child2" 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t \t "id": "15", 
 
\t \t \t \t \t "slug": "child3", 
 
\t \t \t \t \t "title": "child3" 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t \t "id": "16", 
 
\t \t \t \t \t "slug": "child4", 
 
\t \t \t \t \t "title": "child4" 
 
\t \t \t \t } 
 
\t \t \t ] 
 
\t \t }, 
 
\t \t { 
 
\t \t \t "id": "11", 
 
\t \t \t "slug": "parent2", 
 
\t \t \t "title": "Parent2", 
 
\t \t \t "subcategories": [ 
 
\t \t \t \t { 
 
\t \t \t \t \t "id": "32", 
 
\t \t \t \t \t "slug": "child1", 
 
\t \t \t \t \t "title": "child1" 
 
\t \t \t \t }, 
 
\t \t \t \t { 
 
\t \t \t \t \t "id": "33", 
 
\t \t \t \t \t "slug": "child2", 
 
\t \t \t \t \t "title": "child3" 
 
\t \t \t \t } 
 
\t \t \t ] 
 
\t \t } 
 
\t ] 
 

 
\t var pageId = 2; 
 
\t var currentPage = json.filter(function(el){ 
 
\t \t return el.id == pageId; 
 
\t })[0]; \t 
 
\t $.each(currentPage.subcategories, function(index, obj){ 
 
\t \t $('#list-category-slider').append('<div class="item"><a href="/' + obj.slug + '">' + obj.title + '</a></div>'); 
 
\t }) 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='list-category-slider'> 
 

 
</div>

+0

感谢您的支持,它完美运作。 – Sajal

+0

请接受答案,并从json中删除重复的项目并自问。 – adhikari18