使用字符串键访问数组

Question

我正在从 JSON 对象 tableobj 生成 html 元素，并通过 generate() 函数将它们分配给数组 elementArray，这有效很好，但问题是当我将 elementArray 传递给 assemble() 函数时出现以下错误。

Uncaught TypeError: Cannot read property 'appendChild' of undefined

我正在寻找的是 assemble() 的输出结构 table，它基于 binding 属性.

例如：将 <thead> 附加到 <table> 因此 <thead> 的绑定将为 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

我相信我理解你想要完成的事情：

取下面的字符串和数组

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

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

此处您已根据动态字符串括入数组。

这个 eval 的等效代码是：

arr[0][0];

Answer 2

遍历绑定中的字符，获取每个字符的子元素以深入到 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 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));

使用字符串键访问数组

Accessing array with string key

javascript

arrays

string

append

appendchild