Question

for (var key in obj[i]) {
    dataDump[key] = textField.value;
    textField.addEventListener('change', function (e) {
        dataDump[key] = e.source.value;
    })
}

I am associating each key in my Object to the TextField which it get’s mapped. Now when i change the TextField….. the value get’s stored in the last key instead of key associated with the textField…

I am changing the TextField One… whose key is dataDump['FirstKeyName'], but it get’s store in the dataDump[‘LastKeyName’]…

Answer 1

that’s normal. You are using a closure. So when you have the callback on change, it searches for key. But you have already finished iterating through obj and key equals the last “entry” of obj.

To correctly associate the key you can do this :

for (var key in obj[i]) {
    dataDump[key] = textField.value;

    var callback = function(zeKey){
     return function(e){
      dataDump[zeKey] = e.source.value;
     }; 
    }(key);

    textField.addEventListener('change', callback);
}