Доступ массива со строкой ключа

Question

я генерация HTML элементов из объекта JSON tableobj и назначить их в массив elementArray через функцию generate(), это прекрасно работает, но проблема в том, когда я прохожу elementArray функции assemble() я получаю следующая ошибка.

Uncaught TypeError: Cannot read property 'appendChild' of undefined

То, что я ищу, чтобы иметь выход из assemble() структуру таблицы, которая основана на binding собственности.

Например: добавление к <thead><table> поэтому <thead> «S связывания будет 0, так как его родительский элемент elementArray[0] который был бы <table>. Этот же шаблон для <tr> будет 00, так как это будет <table> дочерний элемент 0 который будет <thead> и т.д ...

// КОД

<script> 
var tableobj = [ 
     {table:{binding:""}}, 
     {thead:{binding:"0"}}, 
     {tbody:{binding:"0"}}, 
     {tr:{binding:"00"}}, 
     {th:{binding:"000"}}, 
     {th:{binding:"000"}}, 
     {th:{binding:"000"}} 
]; 

function init(){ 
    //GENERATE HTML & BIND PROPERTIES 
    var elementArray = generate(tableobj); 
    console.log(elementArray); 

    //ASSEMBLE THE TABLE --- example: elementArray[0].appendChild(thead) 
    var elementAssembly = assemble(elementArray); 

    console.log(elementAssembly); 
    console.log(elementAssembly[0]); 
    //OUTPUT 
    //TABlE->THEAD 
    //TABlE->THEAD 
    //TABlE->THEAD->TR 
    //TABlE->THEAD->TR->TH 
    //TABlE->THEAD->TR->TH 
    //TABlE->THEAD->TR->TH 
} 
function assemble(o){ 
    o.forEach(function(ele){ 
     var position = ele.position.replace(/0/g,"[0]"); 
     var position = ele.position.split(''); 
     if(ele.position.length > 0){ 
      //WHERE MY QUESTION LIES.... 
      var parent = o[position]; 
      parent.appendChild(ele); 
     } 
    }); 
    return o; 
}; 
function generate(o){ 
    var struct = o.map(function(ele,i){ 
     var element = document.createElement(Object.keys(ele)); 
     for(prop in ele){ 
      var key = Object.keys(ele[prop]); 
      key.forEach(function(attr){ 
       switch(attr){ 
        case "binding": 
         Object.defineProperty(element,'position',{ 
          value: ele[prop][attr] 
         }); 
         break;   
       } 
      });   
     } 
     return element; 
    }) 
    return struct; 
} 

//ONLOAD TRIGGER INIT 
document.addEventListener('DOMContentLoaded', init); 
</script> 

Answer 1

Loop над символами в связывании, получая дочерний элемент для каждого, чтобы развернуть в DOM. Когда вы дойдете до конца, добавьте новый элемент в качестве дочернего.

function assemble(o){ 
    o.forEach(function(ele){ 
     var position = ele.position; 
     if (position.length == 0) { 
      return; 
     } 
     var cur = o[0]; 
     for (var i = 1; i < position.length; i++) { 
      cur = cur.children[position[i]]; 
     } 
     cur.appendChild(ele); 
    }); 
} 

Answer 2

Я считаю, что я понимаю, что вы пытаетесь достичь:

Возьмем следующую строку и массив

var str = "[0][0]"; 
var arr = [["a"], ["b"]]; 

eval("arr" + str); 
=> "a" 

Здесь вы квадратные скобки Int o массив на основе вашей динамической строки.

код эквивалент этой Eval будет:

arr[0][0]; 

Answer 3

Возможно, вы ищете это. Он использует данный путь как индекс для массива code.

var path = '[0][0][0]', 
 
    code = []; 
 

 
function setValue(array, path, value) { 
 
    var pathA = path.match(/\d+/g), 
 
     index = pathA.pop(); // save last index for access 
 
    pathA.reduce(function (r, a) { 
 
     if (!(a in r)) { 
 
      r[a] = []; 
 
     } 
 
     return r[a]; 
 
    }, array)[index] = value; 
 
} 
 

 
function getValue(array, path) { 
 
    return path.match(/\d+/g).reduce(function (r, a) { 
 
     return r[a]; 
 
    }, array); 
 
} 
 

 
setValue(code, path, 42); 
 
document.write('<pre>' + JSON.stringify(code, 0, 4) + '</pre>'); 
 
document.write(getValue(code, path));