forループでネストされたオブジェクトにアクセスする

Question

JavaScript内で、オブジェクトの配列にリストされたいくつかのオブジェクトから値を出力しようとしています。問題は、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' } 
    ] 
}; 

どのように私でした：具体的には、私は、オブジェクトが次のようになります

（私はちょうどのために/で学び、よくそれを理解しようとしています）可能な場合はforループを使用しないようにしたいと思いますこのオブジェクトに埋め込まれているすべての名前を返す関数を記述しますか？ログインID慰めるのが好き：

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

アイブ氏は、ループ内で/のためのカップルを書いてみましたが、私は予期しない結果を得続けます。 これを見ていただきありがとうございます。アレイから名前を抽出する

Answer 1

を定義されたプロパティのみを取得します。まず、マップの個々の要素をどのように取得するのですか？

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

ログ：

students 
teachers 

だから今、私たちはそのループ内で、一度にusers 1のメンバーで取得できます。

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