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++; 
     } 
    }); 
}, 

제대로 JSON 개체를 반환 $.parseJSON(sessionStorage.getItem(key)) 기능. 직원이 객체에 할당하는 것은 실패

catch되지 않은 형식 오류 : 정의되지 않은

Answer 1

Array.forEach이 this을 보존하지 않습니다

당신은 (다음 예에서 자기) 전에 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의. Array.forEach을 지원하는 브라우저는 JSON.parse()을 지원합니다.

Answer 2

의 '정의되지 않은'설정할 수 없습니다 속성은 당신은 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 3

당신은 this의 범위에 문제가 있습니다. foreach-callback 안에있을 때 이것은 올바른 인스턴스를 가리키고 있지 않습니다. 당신은 유지해야하므로,

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 4

또 다른 방법 : (현재 범위에서) this에 대한 값에 바인딩 된 새로운 기능을 반환하는 기능에 대한 .bind(this)를 호출

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

.

이점은 두 번째 "this for this"매개 변수를 지원하는 메소드를 기억할 필요가 없다는 것입니다. 그것은 항상 작동합니다. 예를 들어, DOM 노드에 이벤트 리스너를 추가 할 때도 마찬가지입니다.

이 특별한 경우에는 tjameson의 첫 번째 제안이 선호됩니다.

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);