JavaScript：文字列から変数名を取得してオブジェクトの値を更新する

Question

私はこのようなJavaScriptオブジェクトを持っています。

var myObj = [ 
    { 
    "HOLIDAY": { 
     "Sun": "Date", 
     "Mon": "Date", 
     "Tue": "Date", 
     "Wed": "Date", 
     "Thr": "Date", 
     "Fri": "Date", 
     "Sat": "Date" 
    } 
    } 
] 

は、と私は私がそのフィールドに何らかの変更を行う場合は、変更するJavaScript変数を格納しているHTMLでこの

<input data-event="change" 
      data-variable="myObj" 
      data-bind="[0]['HOLIDAY']['Sun']" 
      type="text"> 

のように見えるいくつかのHTMLコードを持っています。私はこのようなJavaScriptコードを書いています。

$(document).on('change', '[data-event= change]', function(){ 
    //get-variable-name where to bind data 
    //Get object location inside the variable 
    var sVarName = $(this).data('variable'); 
    var sObjLoca = $(this).data('bind'); 
    eval(sVarName+sObjLoca +' = ' $(this).val()); 
}); 

この問題へのより良いアプローチがあり、現在、私は多くの要素が「変更」イベントを持っていると「のeval」が表示されますように私は、使用しないeval()を使用していますと、パフォーマンスに影響を与えることができます私のコードの。

Answer 1

// Input 
 
var myObj = [{ 
 
    "HOLIDAY": { 
 
    "Sun": "Date", 
 
    "Mon": "Date", 
 
    "Tue": "Date", 
 
    "Wed": "Date", 
 
    "Thr": "Date", 
 
    "Fri": "Date", 
 
    "Sat": "Date" 
 
    } 
 
}] 
 

 
// Function 
 
function updateObject(object, newValue, path) { 
 
    var stack = path.replace(/\]\[/g, '.').replace(/['"\[\]]/g, '').split('.'); 
 

 
    while (stack.length > 1) { 
 
    object = object[stack.shift()]; 
 
    } 
 
    object[stack.shift()] = newValue; 
 
    return object; 
 
} 
 

 
// Output 
 
console.log(updateObject(myObj, 'test1', "[0]['HOLIDAY']['Sat']")); 
 
console.log(updateObject(myObj, 'test2', "[0]['HOLIDAY']['Tue']")); 
 

 
// Can also set like below 
 
console.log(updateObject(myObj, 'otherway', "0.HOLIDAY.Wed"));