忘れやすい、複雑なJSONの要素をfor...in文で取り出す方法

f:id:weed_7777:20160511105035p:plain

配列、連想配列、単純なJSON、項目によってプロパティの中身が異なるような複雑なJSONの要素を、for...inループで取り出すことができます。しかし、やり方に統一感がなく、忘れやすいので、まとめておきます。

// 配列
var list = ['ハンバーグ', 'カレー', '親子丼'];

// 連想配列
var hash = {名前: 'ハンバーグ', 分類: '洋食', 主成分: 'タンパク質'};

// 単純なJSON
var json = {
    ハンバーグ: {
        分類: '洋食',
        主成分: 'タンパク質'
    },
    カレー: {
        分類: '洋食',
        主成分: '炭水化物'
    },
    親子丼: {
        分類: '和食',
        主成分: 'タンパク質'
    }
};

// 複雑なJSON
var complexJson = {
    ハンバーグ: {
        分類: '洋食',
        主成分: 'タンパク質'
    },
    カレー: {
        分類: '洋食',
        主成分: {
            ルー: 'タンパク質',
            ライス: '炭水化物'
        }
    },
    親子丼: {
        分類: '和食',
        主成分: {
            具: 'タンパク質',
            ご飯: '炭水化物'
        }
    }
};

/* ===== 単純な for ===== */

/* ----- 配列 ----- */

for (var i = 0; i < list.length; i++) {
    console.log(list[i])
}
/* 出力
 ハンバーグ
 カレー
 親子丼
 */

/* ====== for in ===== */

/* ----- 配列 ----- */

for (var item in list) {
    console.log(item)
}
/* 出力
 0
 1
 2
 */

for (var i in list) {
    console.log(list[i])
}
/* 出力
 ハンバーグ
 カレー
 親子丼
*/

/* ----- 連想配列 ----- */

for (var key in hash) {
    console.log(key + ': ' + hash[key])
}
/* 出力
 名前: ハンバーグ
 分類: 洋食
 主成分: タンパク質
 */

/* ----- json ----- */

for (var item in json) {
    console.log(item)
}
/* 出力
 ハンバーグ
 カレー
 親子丼
*/

for (var item in json) {
    console.log(json[item])
}
/* 出力
 { '分類': '洋食', '主成分': 'タンパク質' }
 { '分類': '洋食', '主成分': '炭水化物' }
 { '分類': '和食', '主成分': 'タンパク質' }
 */

for (var item in json) {
    console.log(item + ': ' + json[item]['分類'])
}
/* 出力
 ハンバーグ: 洋食
 カレー: 洋食
 親子丼: 和食
 */

/* ----- complexJson ----- */

for (var item in complexJson) {
    console.log(item)
}
/* 出力
 ハンバーグ
 カレー
 親子丼
 */

for (var item in complexJson) {
    console.log(item + ': ' + complexJson[item])
}
/* 出力
 ハンバーグ: [object Object]
 カレー: [object Object]
 親子丼: [object Object]
 */
for (var item in complexJson) {
    console.log(item + ': ' + complexJson[item]['分類'])
}
/* 出力
 ハンバーグ: 洋食
 カレー: 洋食
 親子丼: 和食
 */

for (var item in complexJson) {
    console.log(item + ': ' + complexJson[item]['主成分'])
}
/* 出力
 ハンバーグ: タンパク質
 カレー: [object Object]
 親子丼: [object Object]
 */

for (var item in complexJson) {
    for (var subItem in complexJson[item]) {
        console.log(item + ': ' + subItem + ': ' + complexJson[item][subItem])
    }
}
/* 出力
 ハンバーグ: 分類: 洋食
 ハンバーグ: 主成分: タンパク質
 カレー: 分類: 洋食
 カレー: 主成分: [object Object]
 親子丼: 分類: 和食
 親子丼: 主成分: [object Object]
 */

for (var item in complexJson) {
    for (var subItem in complexJson[item]) {
        if (typeof complexJson[item][subItem] === 'object') {
            for (var sub2Item in complexJson[item][subItem]) {
                console.log(item + ': ' + subItem + ': ' + sub2Item
                    + ': ' + complexJson[item][subItem][sub2Item])
            }
        }
        else {
            console.log(item + ': ' + subItem + ': ' + complexJson[item][subItem])
        }
    }
}
/* 出力
 ハンバーグ: 分類: 洋食
 ハンバーグ: 主成分: タンパク質
 カレー: 分類: 洋食
 カレー: 主成分: ルー: タンパク質
 カレー: 主成分: ライス: 炭水化物
 親子丼: 分類: 和食
 親子丼: 主成分: 具: タンパク質
 親子丼: 主成分: ご飯: 炭水化物
 */

/* ====== for of (for each in) ===== */

/* ----- 配列 ----- */

for (var item of list) {
    console.log(item)
}
/* 出力
 ハンバーグ
 カレー
 親子丼
*/