Доступ к вложенным объектам с помощью цикла for for

Question

Внутри javascript я пытаюсь напечатать значения из нескольких объектов, перечисленных в массиве в объекте. Вопрос связан с сверлением объектов/массивов с помощью цикла for 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' } 
    ] 
}; 

Как мог я написать функцию, которая возвращает все имена, возникшие в этом объекте? Id нравится утешать войти:

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

Ive пытался написать пару для/в петлях, но я получаю неожиданные результаты. Заранее благодарим за это.

Answer 1

Вы можете разбить проблему, как это на более мелкие части. Во-первых, как нам попасть на отдельные элементы вашей карты?

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

Поместите все эти части вместе, и вы очень близки к цели (Вам просто нужно прописные - Google это)

Таким образом, мы имеем все необходимое, чтобы достичь в Javascript, что это псевдокод подытоживает:

for each type of user in "users" 
    for each user record in the list 
     print the index, firstname and lastname 
    end 
end 

Вы можете сделать это более аккуратным, извлекая внутреннюю петлю в свою собственную функцию.Вы можете сделать это более продвинутыми способами, используя конструкторы функционального программирования, такие как 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 получить только те свойства, вы определили

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

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"/>