web-dev-qa-db-ja.com

JavaScriptオブジェクトの配列内のIDでオブジェクトを探す

私は配列を持っています：

myArray = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'}, etc.]

配列の構造を変えることができません。私は45のIDを渡されています、そして私は配列のそのオブジェクトのための'bar'を取得したいです。 

JavaScriptまたはjQueryを使用してこれを行うにはどうすればよいですか。

javascriptjqueryarraysobjectjavascript-objects
1246
thugsb

find()メソッドを使います。

myArray.find(x => x.id === '45').foo;

MDN から）

配列内の要素が提供されたテスト関数を満たす場合、find()メソッドは配列内の値を返します。そうでなければundefinedが返されます。

代わりに index を見つけたい場合は、findIndex()を使用してください。

myArray.findIndex(x => x.id === '45');

MDN から）

findIndex()メソッドは、提供されたテスト関数を満たす配列の最初の要素のインデックスを返します。そうでない場合は-1が返されます。

一致する要素の配列を取得したい場合は、代わりに filter() メソッドを使用してください。

myArray.filter(x => x.id === '45');

これはオブジェクトの配列を返します。 fooプロパティの配列を取得したい場合は、 map() メソッドを使用してこれを実行できます。

myArray.filter(x => x.id === '45').map(x => x.foo);

サイドノート：find()やfilter()、 arrow functions などのメソッドは古いブラウザ（IEなど）ではサポートされていないため、これらのブラウザをサポートしたい場合は Babel （ polyfill ）.

677
Michał Perłakowski

すでにjQueryを使っているので、配列を検索するための grep 関数を使うことができます。

var result = $.grep(myArray, function(e){ return e.id == id; });

結果は見つかったアイテムの配列です。オブジェクトが常に存在し、それが1回だけ発生することがわかっている場合は、result[0].fooを使用して値を取得できます。それ以外の場合は、結果の配列の長さを確認してください。例：

if (result.length == 0) {
  // not found
} else if (result.length == 1) {
  // access the foo property using result[0].foo
} else {
  // multiple items found
}
1430
Guffa

もう1つの解決策は、検索オブジェクトを作成することです。

var lookup = {};
for (var i = 0, len = array.length; i < len; i++) {
    lookup[array[i].id] = array[i];
}

... now you can use lookup[id]...

たくさんの検索をする必要がある場合、これは特におもしろいです。

IDとオブジェクトが共有されるので、これはそれ以上メモリを必要としません。

347
Aaron Digulla

ECMAScript 2015は、配列に対して find（） メソッドを提供します。 

var myArray = [
 {id:1, name:"bob"},
 {id:2, name:"dan"},
 {id:3, name:"barb"},
]

// grab the Array item which matchs the id "2"
var item = myArray.find(item => item.id === 2);

// print
console.log(item.name);

外部ライブラリがなくても動作します。しかし、 古いブラウザのサポート ）が必要な場合は、 このpolyfill を含めることをお勧めします。

158
Rúnar Berg

Underscore.js にはそのためのNiceメソッドがあります。

myArray = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'},etc.]
obj = _.find(myArray, function(obj) { return obj.id == '45' })
140
GijsjanB

最も簡単な方法は次のようになると思いますが、Internet Explorer 8（またはそれ以前）では機能しません。

var result = myArray.filter(function(v) {
    return v.id === '45'; // Filter out the appropriate one
})[0].foo; // Get result and access the foo property
123
pimvdb

以下を試してください

function findById(source, id) {
  for (var i = 0; i < source.length; i++) {
    if (source[i].id === id) {
      return source[i];
    }
  }
  throw "Couldn't find object with id: " + id;
}
65
JaredPar
myArray.filter(function(a){ return a.id == some_id_you_want })[0]
42
Danilo Colasso

上記のfindById関数の一般的でより柔軟なバージョン

// array = [{key:value},{key:value}]
function objectFindByKey(array, key, value) {
    for (var i = 0; i < array.length; i++) {
        if (array[i][key] === value) {
            return array[i];
        }
    }
    return null;
}

var array = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'}];
var result_obj = objectFindByKey(array, 'id', '45');
30
will Farrell

map（） 関数を使ってこれを簡単に得ることができます。

myArray = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'}];

var found = $.map(myArray, function(val) {
    return val.id == 45 ? val.foo : null;
});

//found[0] == "bar";

作業例： http://jsfiddle.net/hunter/Pxaua/

14
hunter

フィルタを使うことができます

  function getById(id, myArray) {
    return myArray.filter(function(obj) {
      if(obj.id == id) {
        return obj 
      }
    })[0]
  }

get_my_obj = getById(73, myArray);
13
Joe Lewis

ここには多くの正しい答えがありますが、それらの多くは、これが複数回行われるとこれが不必要に高価な操作であるという事実に対処しません。極端な場合には、これが実際のパフォーマンス問題の原因となる可能性があります。

現実の世界では、たくさんのアイテムを処理していてパフォーマンスが懸念される場合は、最初にルックアップを作成するほうがはるかに高速です。

var items = [{'id':'73','foo':'bar'},{'id':'45','foo':'bar'}];

var lookup = items.reduce((o,i)=>o[i.id]=o,{});

これで、次のように一定時間内に商品を入手できます。 

var bar = o[id];

ルックアップとして、オブジェクトではなくMapを使用することを検討することもできます。 https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Map

10
Tom

ネイティブを使用する Array.reduce

var array = [ {'id':'73' ,'foo':'bar'} , {'id':'45' ,'foo':'bar'} , ];
var id = 73;

var found = array.reduce(function(a, b){
    return (a.id==id && a) || (b.id == id && b)
});

見つかった場合はobject要素を返し、それ以外の場合はfalse

10
laggingreflex

これが純粋なJavaScriptでどのように扱われるのかを、最低限の方法でECMAScript 3以降で実現できることを説明します。一致が見つかるとすぐに戻ります。

var getKeyValueById = function(array, key, id) {
    var testArray = array.slice(), test;
    while(test = testArray.pop()) {
        if (test.id === id) {
            return test[key];
        }
    }
    // return undefined if no matching id is found in array
    return;
}

var myArray = [{'id':'73', 'foo':'bar'}, {'id':'45', 'foo':'bar'}]
var result = getKeyValueById(myArray, 'foo', '45');

// result is 'bar', obtained from object with id of '45'
6
Dan W

受け入れられた答えに基づいて

jQuery：

var foo = $.grep(myArray, function(e){ return e.id === foo_id})
myArray.pop(foo)

またはCoffeeScript：

foo = $.grep myArray, (e) -> e.id == foo_id
myArray.pop foo
4
mr.musicman

http://sugarjs.com/ からSugarjsを試すことができます。

それは.findという非常に甘いメソッドを配列に持っています。だから、あなたはこのような要素を見つけることができます：

array.find( {id: 75} );

他の "where-clause"を追加するために、より多くのプロパティを持つオブジェクトを渡すこともできます。

Sugarjsはネイティブオブジェクトを拡張していることに注意してください。一部の人はこれを非常に悪いと考えています...

4
deepflame

これを複数回行う場合は、地図（ES6）を設定できます。

const map = new Map( myArray.map(el => [el.id, el]) );

それからあなたは単にすることができます：

map.get(27).foo
4
Jonas Wilms

Array.prototype.filter()関数を使用してください。

_デモ_ ： https://jsfiddle.net/sumitridhal/r0cz0w5o/4/

_ json _ 

var jsonObj =[
 {
  "name": "Me",
  "info": {
   "age": "15",
   "favColor": "Green",
   "pets": true
  }
 },
 {
  "name": "Alex",
  "info": {
   "age": "16",
   "favColor": "orange",
   "pets": false
  }
 },
{
  "name": "Kyle",
  "info": {
   "age": "15",
   "favColor": "Blue",
   "pets": false
  }
 }
];

_ filter _ 

var getPerson = function(name){
    return jsonObj.filter(function(obj) {
      return obj.name === name;
    });
}
3
Sumit Ridhal

配列内の任意の項目を繰り返します。あなたが訪問するすべてのアイテムについて、そのアイテムのIDを確認してください。それが一致した場合、それを返します。

あなただけのコーデックが必要な場合：

function getId(array, id) {
    for (var i = 0, len = array.length; i < len; i++) {
        if (array[i].id === id) {
            return array[i];
        }
    }
    return null; // Nothing found
}

ECMAScript 5のArrayメソッドを使用した場合も同じです。

function getId(array, id) {
    var obj = array.filter(function (val) {
        return val.id === id;
    });

    // Filter returns an array, and we just want the matching item.
    return obj[0];
}
3
Zirak

純粋なJavaScriptでも、配列に対して組み込みの「filter」関数を使用することでこれを実行できます。

Array.prototype.filterObjects = function(key, value) {
    return this.filter(function(x) { return x[key] === value; })
}

そのため、keyの代わりに "id"を、valueの代わりに "45"を渡すだけで、45のIDに一致する完全なオブジェクトが得られます。

myArr.filterObjects("id", "45");
3
kaizer1v

ブラウザが ECMA-262 、第5版（2009年12月）をサポートしている限り、これはうまくいくはずです。

var bFound = myArray.some(function (obj) {
    return obj.id === 45;
});
2
aggaton

私はAaron Digullaによって提供された答えが本当に好きでしたが、後でそれを繰り返すことができるように私のオブジェクトの配列を保つ必要がありました。それで私はそれをに修正しました 

	var indexer = {};
	for (var i = 0; i < array.length; i++) {
	    indexer[array[i].id] = parseInt(i);
	}
	
	//Then you can access object properties in your array using 
	array[indexer[id]].property

2
quincyaft

この解決策も役に立つかもしれません：

Array.prototype.grep = function (key, value) {
    var that = this, ret = [];
    this.forEach(function (elem, index) {
        if (elem[key] === value) {
            ret.Push(that[index]);
        }
    });
    return ret.length < 2 ? ret[0] : ret;
};
var bar = myArray.grep("id","45");

私はそれを$.grepと同じように作りました、そしてもし1つのオブジェクトが見つかれば、 function は配列ではなくオブジェクトを返します。

1
soytian

つかいます：

var retObj ={};
$.each(ArrayOfObjects, function (index, obj) {

        if (obj.id === '5') { // id.toString() if it is int

            retObj = obj;
            return false;
        }
    });
return retObj;

それはidによってオブジェクトを返すべきです。

1
volumexxx

"axesOptions"がオブジェクトフォーマットが {：field_type => 2、：fields => [1,3,4]}のオブジェクトの配列であると考えます

function getFieldOptions(axesOptions,choice){
  var fields=[]
  axesOptions.each(function(item){
    if(item.field_type == choice)
        fields= hashToArray(item.fields)
  });
  return fields;
}
0
ramya

より一般的で短い

function findFromArray(array,key,value) {
        return array.filter(function (element) {
            return element[key] == value;
        }).shift();
}

あなたのケースではvar element = findFromArray(myArray,'id',45)はあなたに要素全体を与えるでしょう。

0
Savan Kaneriya

最短、

var theAnswerObj = _.findWhere(array, {id : 42});
0
Manu

Jqueryのメソッド$ .each（）/ $。grep（） var data= []; $.each(array,function(i){if(n !== 5 && i > 4){data.Push(item)}}を使うことができます。

または 

var data = $.grep(array, function( n, i ) { return ( n !== 5 && i > 4 ); });

eS6構文を使用します。 Array.find, Array.filter, Array.forEach, Array.map

またはLodash https://lodash.com/docs/4.17.10#filter 、Underscore https://underscorejs.org/#filter を使用

0
TLbiz

aggaton's answer から始めて、これは実際に必要な要素（または見つからなかった場合はnull）を返し、arrayとtruthyを返すcallback関数を指定する関数「正しい」要素の値

function findElement(array, callback) {
    var elem;
    return array.some(function(e) {
        if (callback(e)) {
            elem = e;
            return true;
        }
    }) ? elem : null;
});

someはサポートされていないので、これはIE8-ではネイティブには機能しないことを忘れないでください。ポリフィルを提供することもできますが、代わりに常に古典的なforループがあります。

function findElement(array, callback) {
    for (var i = 0; i < array.length; i++)
        if (callback(array[i])) return array[i];
    return null;
});

それは実際より速くそしてよりコンパクトです。しかし、車輪の再発明を望まない場合は、アンダースコアやlodashなどのユーティリティライブラリを使用することをお勧めします。

0
MaxArt