動態腳手架基於字符串路徑的JavaScript對象

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

你用錯了對象路徑（店[路徑[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]]); 
} 

您的路徑是['foo'，'bar'，'blablah']的數組，因此移動會從數組中移除'foo'。但是您試圖在store ['foo'] ['' bar']，所以store [path [0]]試圖訪問一個對象ct在store ['bar']裏不存在。

這裏是一個工作版本

https://jsfiddle.net/j87m4z71/