以上結構遞歸迭代

Question

我有以下結構：

var struct = [{ 
    "name": "Name1", 
    "type": "type1", 
    "children": [{ 
     "name": "Name11", 
     "type": "type1", 
     "children": [{ 
      "name": "Name111", 
      "type": "type1" 
      }, 
      { 
      "name": "Name112", 
      "type": "type2" 
      } 
     }] 
    }] 
}]; 

欲遍歷所有名稱型元件，其中類型是等於type1併爲他們中的每一個的<option>元件。

因此，這將是這樣的：

var iterate = function (data) { 
    var elements = []; 
    for (var i in data) { 
     if (data[i].type == 'type1') { 
     var option = document.createElement('option'); 
     option.innerHTML = data[i].name; 
     elements.push(option); 
     elements.push(iterate(data[i].children)); 
     } 
    } 
    return elements; 
}; 

但是它給了我錯誤的結果。可能效率很低。我應該如何正確地做到這一點？

Answer 1

你可以使用迭代遞歸方法用於獲取嵌套數據。

function getElements(data) { 
 
    var elements = []; 
 
    data.forEach(function iter(a) { 
 
     var option; 
 
     if (a.type === 'type1') { 
 
      option = document.createElement('option'); 
 
      option.innerHTML = a.name; 
 
      elements.push(option); 
 
      Array.isArray(a.children) && a.children.forEach(iter); // assuming only 
 
     }               // type1 branches 
 
    });               // to iterate 
 
    return elements; 
 
} 
 

 
var struct = [{ "name": "Name1", "type": "type1", "children": [{ "name": "Name11", "type": "type1", "children": [{ "name": "Name111", "type": "type1" }, { "name": "Name112", "type": "type2" }] }] }]; 
 

 
console.log(getElements(struct));

Answer 2

我認爲你不能使用任何「元素」變種，只是試試這個：

var iterate = function (data) { 
    for (var i in data) { 
     if (data[i].type == 'type1') { 
     var option = document.createElement('option'); 
     option.innerHTML = data[i].name; 
     data[i].push(option); 
     iterate(data[i].children); 
     } 
    } 
    return data; 
};