for 루프로 중첩 된 객체에 액세스하기

Question

자바 스크립트 내에서 개체의 배열에 나열된 몇 가지 객체의 값을 인쇄하려고합니다. 질문은 for 루프를 사용하여 객체/배열로 드릴링하는 것과 관련이 있습니다.

var users = { 
    'Students': [ 
    { first_name: 'Michael', last_name : 'Jordan' }, 
    { first_name : 'John', last_name : 'Rosales' }, 
    { first_name : 'Mark', last_name : 'Guillen' }, 
    { first_name : 'KB',  last_name : 'Tonel' } 
    ], 
    'Instructors': [ 
    { first_name : 'Michael', last_name : 'Jackson' }, 
    { first_name : 'Martin', last_name : 'Puryear' } 
    ] 
}; 

어떻게 내가 할 수있는 : 구체적 I는 다음과 같습니다

개체를 수 (/과 잘 이해하려고 노력하고 내가 방금 배운) 경우 루프를 사용하지 않도록하고 싶습니다 이 객체에 묻혀있는 이름을 모두 반환하는 함수를 작성 하시겠습니까? 이드 로그 콘솔 싶은 :

Students 
1 - MICHAEL JORDAN 
2 - JOHN ROSALES 
3 - MARK GUILLEN 
4 - KB TONEL 
Instructors 
1 - MICHAEL JACKSON 
2 - MARTIN PURYEAR 

은 필자가 루프에 대한/몇 가지를 작성하려하지만 예기치 않은 결과를 점점 계속. 미리 살펴 줘서 고마워.

Answer 1

var users = { 
 
'Students': [ 
 
    {first_name: 'Michael', last_name : 'Jordan'}, 
 
    {first_name : 'John', last_name : 'Rosales'}, 
 
    {first_name : 'Mark', last_name : 'Guillen'}, 
 
    {first_name : 'KB', last_name : 'Tonel'} 
 
    ], 
 
'Instructors': [ 
 
    {first_name : 'Michael', last_name : 'Jackson'}, 
 
    {first_name : 'Martin', last_name : 'Puryear'} 
 
    ] 
 
} 
 
var properties = Object.keys(users); 
 

 
for (var i = 0; i < properties.length; i++) { 
 
    console.log(properties[i]); 
 
    var users_array = users[properties[i]]; 
 
    for(var j = 0; j < users_array.length; j++) 
 
    console.log((j+1) + " - " + users_array[j].first_name + " " + users_array[j].last_name); 
 
}

을 정의했다. 첫째,지도의 개별 요소를 어떻게 얻는가?

for (var key in users) { 
    console.log(key); 
} 

로그 :

students 
teachers 

그래서 지금 우리는 그 루프 내에서 한 번에 users 하나의 구성원에서 얻을 수 있습니다 : 배열 매번 추출

var userArray = users[key]; 

합니다. 이제 배열을 통해, 루프 내부에서이 을 추가하여 루프 우리는 이미을 가질 수

예를 들어, 목록에서 개별 항목을 출력

for(var i in userArray) { 
    console.log(userArray[i]); 
} 

{first_name: 'Michael', last_name : 'Jordan'}

이제 다른 방법으로 인쇄 할 수 있습니다.

var item = userArray[i]; 
console.log(i + ' ' + item[first_name] + ' ' + item[last_name]); 

함께 모든 조각을 넣어 당신이 당신의 목표에 매우 가까운 (당신은 대문자로해야합니다! - 구글을)

그래서 우리는 우리가 자바 스크립트에 달성하기 위해 필요한 모든 것을, 어떤이 의사가 다음과 같이 요약합니다.

고유 한 기능으로 내부 루프를 추출하여이를보다 미세하게 만들 수 있습니다.array.map()과 같은 함수 프로그래밍 구조를 사용하여 한 배열을 다른 배열로 변환함으로써보다 고급 방법으로이를 수행 할 수 있습니다. 그러나 위의 내용은 문제를 해결하기위한 좋은 "초보자 방식"입니다.

Answer 2

사용 array#map는 배열에서 이름을 추출 :

function getNames(arr) { 
 
    return arr.map(function(o, i) { // is the object, i is the index in the array 
 
    return (i + 1) + ' - ' + o.first_name + ' ' + o.last_name; 
 
    }); 
 
} 
 

 
var users = { 
 
'Students': [ 
 
    {first_name: 'Michael', last_name : 'Jordan'}, 
 
    {first_name : 'John', last_name : 'Rosales'}, 
 
    {first_name : 'Mark', last_name : 'Guillen'}, 
 
    {first_name : 'KB', last_name : 'Tonel'} 
 
    ], 
 
'Instructors': [ 
 
    {first_name : 'Michael', last_name : 'Jackson'}, 
 
    {first_name : 'Martin', last_name : 'Puryear'} 
 
    ] 
 
}; 
 

 
var students = getNames(users.Students); 
 

 
var instructors = getNames(users.Instructors); 
 

 
console.log('Students\n', students); 
 
console.log('Instructors', instructors);

Answer 3

귀하의 예기치 않은 결과가해야하기 때문에 프로토 타입 체인에 for ... in으로 반복 또한 속성. 속성 만 얻을

사용 Object.keys 당신은 당신은 작은 부분으로이 같은 문제를 깰 수

Answer 4

할 수 있습니다 통해 키를 통해 간단하게 루프 :

for (var userGroup in users) { ... } 

그리고 당신을 통해 사용자의 그룹의 목록을 얻을 수의

users[userGroup].forEach((item, index) => item); 

var users = { 
 
    'Students': [ 
 
    { first_name: 'Michael', last_name : 'Jordan' }, 
 
    { first_name : 'John', last_name : 'Rosales' }, 
 
    { first_name : 'Mark', last_name : 'Guillen' }, 
 
    { first_name : 'KB',  last_name : 'Tonel' } 
 
    ], 
 
    'Instructors': [ 
 
    { first_name : 'Michael', last_name : 'Jackson' }, 
 
    { first_name : 'Martin', last_name : 'Puryear' } 
 
    ] 
 
}; 
 

 
createLists(users, document.body, function(user) { 
 
    return (user.first_name + ' ' + user.last_name).toUpperCase(); 
 
}); 
 

 
function createLists(dataMap, target, formatFn) { 
 
    for (var groupName in dataMap) { 
 
    target.appendChild(createTextEl('H3', groupName)); 
 
    var listEl = document.createElement('OL'); 
 
    addListItems(dataMap[groupName], listEl, formatFn); 
 
    target.appendChild(listEl); 
 
    } 
 
} 
 
function addListItems(dataList, target, formatFn) { 
 
    dataList.forEach((item, index) => target.appendChild(createTextEl('LI', formatFn(item)))); 
 
} 
 
function createTextEl(tagName, text) { 
 
    var el = document.createElement(tagName); 
 
    el.appendChild(document.createTextNode(text)); 
 
    return el; 
 
}

* { font-size: 0.95em; }

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" rel="stylesheet"/>