json递归+选择元素

Question

如何使用json和mootools库填充选择元素？

我的JSON数据如下：

var data = {"tree": 
         [ 
          {"id":1,"parent":0,"name":"Category A","subcategories":[]}, 
          {"id":2,"parent":0,"name":"Category B","subcategories": 
            [ 
             {"id":6,"parent":2,"name":"Subcategory F","subcategories":[]}, 
             {"id":7,"parent":2,"name":"Subcategory G","subcategories":[]} 
            ] 
          }, 
          {"id":3,"parent":0,"name":"Category C","subcategories": 
            [ 
             {"id":8,"parent":3,"name":"Subcategory H","subcategories":[]} 
            ] 
          }, 
          {"id":4,"parent":0,"name":"Category D","subcategories": 
            [ 
             {"id":9,"parent":4,"name":"Subcategory I","subcategories": 
              [ 
               {"id":10,"parent":9,"name":"Subcategory J","subcategories":[]} 
              ] 
             } 
            ] 
          },{"id":5,"parent":0,"name":"Category E","subcategories":[]} 
         ] 
       }; 

我怎样才能得到这个输出标记：

<select> 
     <option value="1">Category A</option> 
     <option value="2">Category B</option> 
     <option value="6">Category B->Subcategory F</option> 
     <option value="7">Category B->Subcategory G</option> 
     <option value="3">Category C</option> 
     <option value="8">Category C->Subcategory H</option> 
     <option value="4">Category D</option> 
     <option value="9">Category D->Subcategory I</option> 
     <option value="10">Category D->Subcategory I->Subcategory J</option> 
     <option value="5">Category E</option> 
    </select> 

Answer 1

JSFiddle使用递归

代码：

var data = {"tree": 
        [ 
         {"id":1,"parent":0,"name":"Category A","subcategories":[]}, 
         {"id":2,"parent":0,"name":"Category B","subcategories": 
           [ 
            {"id":6,"parent":2,"name":"Subcategory F","subcategories":[]}, 
            {"id":7,"parent":2,"name":"Subcategory G","subcategories":[]} 
           ] 
         }, 
         {"id":3,"parent":0,"name":"Category C","subcategories": 
           [ 
            {"id":8,"parent":3,"name":"Subcategory H","subcategories":[]} 
           ] 
         }, 
         {"id":4,"parent":0,"name":"Category D","subcategories": 
           [ 
            {"id":9,"parent":4,"name":"Subcategory I","subcategories": 
             [ 
              {"id":10,"parent":9,"name":"Subcategory J","subcategories":[]} 
             ] 
            } 
           ] 
         },{"id":5,"parent":0,"name":"Category E","subcategories":[]} 
        ] 
      }; 
     //create the select element 
     var select = new Element('select'); 

     //recurse function going on all the elements->sub-elements etc... 
     function recurseData(arr,parent_name_prefix){ 
      if(!parent_name_prefix){parent_name_prefix = '';} 
      arr.each(function(item){ 
       var name = item.name; 
       var letter = name.split(' ')[1]; 
       var value = getABNumber(letter); 

       var text = parent_name_prefix + name; 
       addSelectOption(text,value); 
       var arr_sub = item.subcategories; 
       recurseData(arr_sub,text + ' -> '); 
      }); 
     } 

     //add option to select 
     function addSelectOption(text,value){ 
      select.options[select.options.length] = new Option(text,value); 
     } 
     //function that get numner according to letter 
     function getABNumber (val) { 
      var base = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ', i, j, result = 0; 

      for (i = 0, j = val.length - 1; i < val.length; i += 1, j -= 1) { 
      result += Math.pow(base.length, j) * (base.indexOf(val[i]) + 1); 
      } 

      return result; 
     }; 

     //trigger all using the main arr 
     recurseData(data.tree); 

     //inject select to body 
     select.inject(document.body);