Javascript迭代JSON的遞歸函數的中斷條件

Question

我不確定如何檢查併爲此遞歸函數創建中斷條件。目前該功能凍結瀏覽器（似乎無休止地循環）。

我想根據列表對象中提供的數據生成一系列嵌套的無序列表。

這裏是小提琴：https://jsfiddle.net/mzckoc7s/

var list = { 
    "primary": [{ 
     "item": "item 1" 
    }, { 
     "item": "item 2", 
     "secondary": [{ 
      "item": "item secondary 1" 
     }, { 
      "item": "item secondary 2" 
     }, { 
      "item": "item secondary 3", 
      "secondary": [{ 
       "item": "item inner secondary 1" 
      }] 
     }] 
    }, { 
     "item": "item 3" 
    }] 
} 

function items(obj) { 
    var output = '<ul>'; 
    for (i = 0; i < obj.length; i++) { 
     output += '<li>' + obj[i].item + '</li>'; 
     if (typeof obj[i].secondary != 'undefined') { 
      items(obj[i].secondary); 
      break; 
     } 
    } 
    output += '</ul>'; 
    return output; 
} 

最後的結果應該是這樣的：

<ul> 
<li>item 1</li> 
    <li>item 2 
     <ul> 
      <li>item secondary 1</li> 
      <li>item secondary 2</li> 
      <li>item secondary 3 
       <ul> 
        <li>item inner secondary 1</li> 
       </ul> 
      </li> 
     </ul> 
     </li> 
    <li>item 3</li> 
</ul> 

Answer 1

你可以使用一個嵌套的方法來遍歷對象的鍵和possisble陣列。然後建立輸出並尊重沒有給予的孩子。

function getItems(object) { 
 
    var output = ''; 
 
    object && typeof object === 'object' && Object.keys(object).forEach(function (k) { 
 
     if (k === 'item' || !object[k]) { 
 
      return; 
 
     } 
 
     output = output || '<ul>'; 
 
     output += (Array.isArray(object[k]) ? object[k] : [object[k]]).map(function (a) { 
 
      return '<li>' + a.item + getItems(a) + '</li>'; 
 
     }).join(''); 
 
    }); 
 
    output += output && '</ul>'; 
 
    return output; 
 
} 
 

 
var list = { primary: [{ item: "item 1" }, { item: "item 2", secondary: [{ item: "item secondary 1" }, { item: "item secondary 2" }, { item: "item secondary 3", secondary: { item: "item inner secondary 1" } }] }, { item: "item 3" }] }, 
 
    result = getItems(list); 
 

 
document.body.innerHTML = result;

.as-console-wrapper { max-height: 100% !important; top: 0; }