連想配列から配列の値と一致する要素を抽出

やりたいこと

JavaScriptで連想配列のキーと配列の値を照らし合わせて、検索結果が一致する要素を連想配列から抽出。

サンプルコード

Ajaxなどで取得したjsonを格納した連想配列（オブジェクトデータ）から、必要なデータのみ抽出して処理したい場合などで遭遇するパターン。

for…of パターン

JavaScript

// 連想配列
var fruits = {
	"みかん":{"price":"200", "num":"5"},
	"いちご":{"price":"400", "num":"1"},
	"ぶどう":{"price":"380", "num":"7"}
}

// 配列（検索ワード）
var target = ['みかん', 'ぶどう'];


var result = {};
for(var key of Object.keys(fruits)){
    // 連想配列のキーと配列の値が一致するか検索
    for(var i of target){
        if(key == i){
            result[key] = fruits[key]; // 連想配列に格納
            break;
        }
    }
}

console.log(result);

console.log

{
  ぶどう: {price: "380", num: "7"}
  みかん: {price: "200", num: "5"}
}

連想配列（object）のキー（プロパティ）取得は、Object.keys()を使うと便利です。

JavaScript

// 連想配列（object）のキー（プロパティ）取得
Object.keys(連想配列名)

// Object.keysを使って、要素数をカウントすることもできる
var length = Object.keys(fruits).length;

連想配列（object）には.push()メソッドで追加できないので、以下のようにします。

JavaScript

arr[キー文字列] = 値; //新規キーと値をセット

for…in パターン

JavaScript

// 連想配列
var fruits = {
	"みかん":{"price":"200", "num":"5"},
	"いちご":{"price":"400", "num":"1"},
	"ぶどう":{"price":"380", "num":"7"}
}

// 配列（検索ワード）
var target = ['みかん', 'ぶどう'];


var result = {};
for(key in fruits){
	// 連想配列のキーと配列の値が一致するか検索
	for(i in target){
		if(key == target[i]){
			result[key] = fruits[key]; // 連想配列に格納
			break;
		}
	}
}

console.log(result);

IEはfor…ofに非対応のため、for…inを使います。（polyfillを使用しない場合）

.filter()パターン

JavaScript

// 連想配列
var fruits = {
    "みかん":{"price":"200", "num":"5"},
    "いちご":{"price":"400", "num":"1"},
    "ぶどう":{"price":"380", "num":"7"}
}

// 配列（検索ワード）
var target = ['みかん', 'ぶどう'];


var result = {};
for(key in fruits){
	target.filter(function(data){
		if(key == data){
			result[key] = fruits[key];
		}
	})
}

console.log(result);

ちょっと強引な気もしますが、for…in内を.filter()で書いたパターン。結果は同じです。

参考

https://www.sejuku.net/blog/27965