개체 배열에서

Question

배열 내의 개체의 내용을 인쇄하는 코드 조각 작업 중입니다.

for(var i=0;i<app.members.length;i++){ 
      output.innerHTML += "<div class='member'><p><b>Id: </b>" + app.members[i].id + "</p><p><b>User: </b>" + app.members[i].user + "</p>" + 
      "<p><b>Name: </b>" + app.members[i].name + "</p><p><b>Email: </b>" + app.members[i].email + 
      "</p><p><b>Age: </b>" + app.members[i].age + "</p></div>"; 
     }; 

: 여기

for(var property in array){ 
} 

내가 현재 사용하고있는 코드의 복사본입니다 : 나는 개체의 각 항목을 인쇄하여 작업하지만이 작업을 수행 할 수있는 경우 궁금 해서요 가지고있다

여기에 시도의의 복사본입니다 :

for(var property in app.members){ 
      output.innerHTML += ("<p><b>" + property + ":</b> " + app.members[property] + "</p>"); 
     }; 

내가 두 번째로 얻을 문제는이 개체 상기 물체의없는 속성을 반환하는 것입니다.

Answer 1

for in 속성을 반복입니다, 그래서 당신이 할 수있는 가정 : for...in와

for(var i=0; i < app.members.length; i++) { 
    for (var prop in app.members[i]) { 
     output.innerHTML += ("<p><b>" + prop + ":</b> " + app.members[i][prop] + "</p>"); 
    } 
} 

Answer 2

당신이 객체의 속성을 반복 할 수 있지만, 배열에있는 모든 개체의하지 속성.

당신은

var html = ''; 
for(var i=0; i<app.members.length; i++){ 
    html += "<div class='member'>"; 
    var member = app.members[i]; 
    for(var prop in member) if(member.hasOwnProperty(prop)) { 
     html += "<p><b>" + prop + ":</b> " + member[prop] + "</p>"; 
    } 
    html += "</div>"; 
} 
output.innerHTML = html; 

그러나, 당신은 for...in 사용하여 반복 할 때, 당신이 어떤 순서를 가정 할 수 있습니다 시도 할 수 있습니다. 즉, 각 app.members[i]은 다른 방식으로 반복 될 수 있으며 원하는 것은 아닙니다.

따라서, 나는 또한 (같은 innerHTML) DOM 작업을 참고 느린, 그래서 당신이 할 수있는 경우 각각의 반복에서 그들을 사용하지

var html = '', 
    props = ['id', 'user', 'name', 'email', 'age']; 
for(var i=0; i<app.members.length; i++){ 
    html += "<div class='member'>"; 
    for(var j=0; j<props.length; j++){ 
     html += "<p><b>" + props[j] + ":</b> " + app.members[i][props[j]] + "</p>"; 
    } 
    html += "</div>"; 
} 
output.innerHTML = html; 

같은 것을 사용합니다. 변수를 더 잘 사용하고 끝에 DOM을 업데이트하십시오.

Answer 3

hasOwnProperty 메소드를 사용해보십시오. MDN에서

for(var property in app.members){ 
     if (app.members.hasOwnProperty(property)) 
      output.innerHTML += ("<p><b>" + property + ":</b> " + app.members[property] + "</p>"); 
    }; 

: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty

모든 객체는 객체의 후손은 hasOwnProperty 방법을 상속합니다. 이 메서드는 객체가 지정된 속성을 해당 객체의 직접 속성으로 포함하는지 여부를 확인하는 데 사용할 수 있습니다. in 연산자와 달리이 메서드는 객체의 프로토 타입 체인을 검사하지 않습니다.