將JSON對象添加到JSON對象

Question

我有一個JSON對象員工，我想用本地存儲中的數據填充。 我首先使用stringify()將JSON對象保存到本地存儲中。

    sessionStorage.setItem('Employee3', JSON.stringify({id: 3, firstName: 'Dwight', lastName: 'Schrute', title: 'Assistant Regional Manager', managerId: 2, managerName: 'Michael Scott', city: 'Scranton, PA', officePhone: '570-444-4444', cellPhone: '570-333-3333', email: 'dwight@dundermifflin.com', reportCount: 0}));

現在，我要填充我的雇員對象：

employees: {},

populate: function() {
    var i = i;
    Object.keys(sessionStorage).forEach(function(key){
        if (/^Employee/.test(key)) {
            this.employees[i] = $.parseJSON(sessionStorage.getItem(key));
            i++;
        }
   });  
},

函數$.parseJSON(sessionStorage.getItem(key))正確返回JSON對象。 將其分配給雇員對象失敗：

未捕獲的TypeError：無法設置未定義的屬性“未定義”

Answer 1

Array.forEach不會保留this ，因此您必須自己保留它。 這些都可以工作（請參閱mdn ）：

Object.keys(sessionStorage).forEach(function(key){
    if (/^Employee/.test(key)) {
        this.employees[i] = $.parseJSON(sessionStorage.getItem(key));
        i++;
    }
}, this);

var self = this;
Object.keys(sessionStorage).forEach(function(key){
    if (/^Employee/.test(key)) {
        self.employees[i] = $.parseJSON(sessionStorage.getItem(key));
        i++;
    }
});

另外，考慮使用瀏覽器的JSON.parse()而不是jQuery的JSON.parse() 。 任何支持Array.forEach瀏覽器Array.forEach將支持JSON.parse() 。

Answer 2

另一種方式：

Object.keys(sessionStorage).forEach((function(key){
    if (/^Employee/.test(key)) {
        this.employees[i] = $.parseJSON(sessionStorage.getItem(key));
        i++;
    }
}).bind(this));

在函數上調用.bind(this)將返回綁定this值（在當前范圍內）的新函數。

這樣做的好處是您無需記住哪些方法支持第二個“此值”。 它始終有效。 例如，當將事件偵聽器添加到DOM節點時，這也適用。

在這種特定情況下，tjameson的第一個建議可能是首選。

Answer 3

您在forEach回調中使用this的值存在問題。 此外，而且您不需要jQuery即可解析JSON。

您可以改為：

employees: {},

populate: function() {
    var that = this;
    var i = i;
    Object.keys(sessionStorage).forEach(function(key){
        if (/^Employee/.test(key)) {
            that.employees[i] = JSON.parse(sessionStorage.getItem(key));
            i++;
        }
   });  
},

Answer 4

您this范圍有this 。 當您在foreach-callback內部時，這並不表示正確的實例。

您需要先保存this的引用，然后通過該引用訪問對象（在以下示例中為self）：

function something(){    
    var self = this;
    ** snip **
    employees: {},

    populate: function() {
        var i = i;
        Object.keys(sessionStorage).forEach(function(key){
            if (/^Employee/.test(key)) {
                self.employees[i] = $.parseJSON(sessionStorage.getItem(key));
                i++;
            }
       });  
    },
    ** snip ** 
}

Answer 5

沒有理由解析JSON，兩個簡單的函數就可以完成工作（希望就是這樣）：

var employees = {};

function setEmployee( data ) {
    var id = data.id;
    sessionStorage.setItem('Employee' + id, JSON.stringify( data ));
};

function getEmployee( id ) {
    employees[id] = sessionStorage.getItem('Employee' + id);
};

var oneEmployee = {
    id: 3,
    firstName: 'Dwight',
    lastName: 'Schrute',
    title: 'Assistant Regional Manager',
    managerId: 2,
    managerName: 'Michael Scott',
    city: 'Scranton, PA',
    officePhone: '570-444-4444',
    cellPhone: '570-333-3333',
    email: 'dwight@dundermifflin.com',
    reportCount: 0
};

setEmployee( oneEmployee );

getEmployee( 3 );