Question

我试图以递归方式从字符串路径动态构建JavaScript对象。最终目标是拥有一个在某个事件上动态生成的对象。

这是我到目前为止所拥有的，但我无法弄清楚它为什么不起作用： jsfiddle链接：https://jsfiddle.net/1Lo7uart/

HTML

<input type="text" data-path="/foo/bar/ni">
<input type="text" data-path="/foo/bar/ni">
<input type="text" data-path="/foo/bar/san">
...

的JavaScript

var storage = {};
var fields = $('.fields');

fields.find('input').each(function() {
    var field = $(this);
    field.change(function(event) {
        var currentField = $(this),
            currentFieldPath = currentField.attr('data-path').split('/').slice(1),
            currentFieldValue = currentField.val();

        function bindData(path, val, store) {
            if (store) {
                if (store.hasOwnProperty(path[0])) {
                    if (path.length === 1) {
                        store[path[0]] = val;
                    } else {
                        path.shift();
                        bindData(path, val, store[path[0]]);
                    }
                } else {
                    if (path.length === 1) {
                        store[path[0]] = val;
                    } else {
                        store[path[0]] = {};
                        var annex = path.shift();
                        bindData(path, val, store[annex]);
                    }
                }
            }
        }

        bindData(currentFieldPath, currentFieldValue, storage);

    });
});
...

理想情况下，这应该会产生类似的结果;

{
    foo: {
        bar: {
            ni: 'some value, that'
            s been over written by the second input ',
            san: 'some value here'
        }
        ...
    }
}

递归工作第一次，但不是之后，哈哈。有什么想法吗？

Answer 1

您在代码中使用了错误的对象路径（存储[path [0]）（jsfiddle的第18行。

使用此：

} else {
        var ann = path.shift();
        //console.log('path', store, path[0], ann, //store[path[0]], store[ann][path[0]])
        console.log('path', path, val)
        bindData(path, val, store[[ann]]);
}

而不是：

} else {
    path.shift();
    bindData(path, val, store[path[0]]);
}

你的道路是一系列[＆＃39; foo＆＃39;，＆＃39; bar＆＃39;，＆＃39; blablah＆＃39;]，因此转移会消除＆＃39; foo＆＃39;从阵列。但是你试图将你的输入存储在商店[＆＃39; foo＆＃39;] [＆＃39; bar＆＃39;]中，因此存储[path [0]]正试图访问商店[＆＃39; bar＆＃39;]并不存在。

这是一个工作版本

https://jsfiddle.net/j87m4z71/

基于字符串路径动态构建JavaScript对象

1 个答案: