2016-03-16 97 views
0

我有一個JSON文件,其中有很多類別名稱。每個類別可以有子類別或沒有。所以我試圖做的是爲每個級別創建一個類別名稱數組。當一個類別沒有任何子類別時,它應該顯示來自先前級別的數組。結果jquery和json多個陣列

2個例子:

// Subcategory A has subcategories so it should show them 
Example 1: Kitchen -> Subcategory A -> Subsubcategory A1 
         Subcategory B Subsubcategory A2 
             Subsubcategory A3 -> etcetc... 
             Subsubcategory A4 

// Subcategory B hasn't any subcategories so it should show the categories from the previous level 
Example 2: Kitchen -> Subcategory A 
         Subcategory B -> Subcategory A 
             Subcategory B 

你怎麼做呢?我正在尋找方向/示例...

我的JSON看起來像這樣(我剪掉了所有未知的東西)。分類可以達到6級深!

shop": { 
    categories": { 
    "1944163": { 
     id": "1944163", 
     "title": "Kitchen", 
     subs": { 
      "1944122": { 
       id": "1944122", 
       "title": "Subcategory A", 
       subs": { 
       "1944182": { 
        id": "1944182", 
        "title": "Subsubcategory A1", 
       "1944152": { 
        id": "1944152", 
        "title": "Subsubcategory A2", 
       // etc etc 
      "1944123": { 
       id": "1944123", 
       "title": "Subcategory B", 
       // etc.. 

當談到對jQuery我不進一步來那麼這個:

$.getJSON('url?format=json', function(data){ 

     $.each(data.shop.categories, function(i, category) { 

     var currentCatId = $('.sidebar-left .sidebar-box ul').find('li.active').data('catid'); 
     if(category.id == currentCatId) { 

      if(category.subs) { 
      $.each(category.subs, function(i, category) { 
       $('.categories-breadcrumbs ul').append('<li>'+category.title+'</li>'); 
      }); 



      } 
      } 

     } 
     });  
    }); 
+0

你必須使用一個字符串並遞歸地將輸出追加到它,或者您可以使用React並讓它爲您完成這項工作。 – Burimi

+0

我會認真考慮重構JSON。這相當笨拙。 – Andy

+0

所以你只是想生成沒有html標籤的文本行如問題所示? – Will

回答

0

下面是我可能會接近它,它涉及了很大的變化,以您的數據的結構。但是,它確實極大地簡化了它。

總之,您有一個包含id,parentIdlabel屬性的對象的平面陣列。 parentId是重要的屬性,因爲它鏈接對象而不必深入嵌套信息。

var cats = [ 
    { id: 1, parentId: 0, label: 'Kitchen' }, 
    { id: 2, parentId: 0, label: 'Man Cave' }, 
    { id: 3, parentId: 1, label: 'Cooker' }, 
    { id: 4, parentId: 3, label: 'Hob' }, 
    { id: 5, parentId: 2, label: 'Moose head' }, 
    { id: 6, parentId: 2, label: 'Cognac' } 
]; 

然後,您可以使用下面的函數基礎上的標識,搶的對象爲正確的級別:

function getData(arr, id) { 
    return arr.filter(function (el) { 
    return el.parentId === id; 
    }); 
} 

I've mocked a demo向您展示它是如何簡單使用此數據