복붙노트

[JQUERY] 자바 스크립트 객체의 배열에 ID를 기준으로 개체를 찾기

JQUERY

자바 스크립트 객체의 배열에 ID를 기준으로 개체를 찾기

해결법

  1. 1.찾기 () 메소드를 사용하여

    찾기 () 메소드를 사용하여

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

    MDN에서 :

    대신 인덱스를 찾으려면, findIndex ()를 사용합니다 :

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

    MDN에서 :

    당신이 일치하는 요소의 배열을 얻고 싶은 경우에 대신 필터 () 메서드를 사용합니다 :

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

    이 객체의 배열을 반환합니다. 당신이 foo는 속성의 배열을 얻고 싶은 경우에, 당신은지도 () 메소드를 사용하여이 작업을 수행 할 수 있습니다 :

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

    사이드 노트 : 발견과 같은 방법 () 또는 필터 () 및 화살표 기능 그래서 당신은이 브라우저를 지원하려는 경우, 당신은 바벨합니다 (polyfill로)를 사용하여 코드를 transpile한다, IE와 같은 이전 버전의 브라우저에서 지원되지 않습니다.

  2. 2.이미 jQuery를 사용하여, 당신은 배열을 검색을위한 것입니다 그렙 기능을 사용할 수 있습니다 :

    이미 jQuery를 사용하여, 당신은 배열을 검색을위한 것입니다 그렙 기능을 사용할 수 있습니다 :

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

    결과는 검색된 항목 배열이다. 당신이 객체가 항상 있다는 것을 그것은 한 번만 발생하는 것을 알고 있다면, 당신은 단지 값을 얻기 위해 결과 [0] .foo를 사용할 수 있습니다. 그렇지 않으면 결과 배열의 길이를 확인해야합니다. 예:

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

  3. 3.또 다른 해결책은 조회 개체를 만드는 것입니다 :

    또 다른 해결책은 조회 개체를 만드는 것입니다 :

    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와 객체가 공유되기 때문에 훨씬 더 많은 메모리를 필요로하지 않습니다.

  4. 4.ECMAScript를 2015 배열에 찾기 () 메소드를 제공한다 :

    ECMAScript를 2015 배열에 찾기 () 메소드를 제공한다 :

    VAR에 myArray = {ID : 1, 이름 : "밥"}, {ID : 2, 이름 : "단"}, {ID : 3, 이름 : "미늘"}, ] // ID가 "2"matchs 배열 항목을 잡아 VAR 항목 = myArray.find (항목 => === item.id 2); // 인쇄 CONSOLE.LOG (item.name);

    그것은 외부 라이브러리없이 작동합니다. 당신은 오래된 브라우저 지원을 원한다면 당신은이 polyfill을 포함 할 수 있습니다.

  5. 5.Underscore.js은을위한 좋은 방법이 있습니다 :

    Underscore.js은을위한 좋은 방법이 있습니다 :

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

  6. 6.내가 가장 쉬운 방법은 다음과있을 거라고 생각하지만, 인터넷 익스플로러 8 (또는 이전)에없는 일 것입니다 :

    내가 가장 쉬운 방법은 다음과있을 거라고 생각하지만, 인터넷 익스플로러 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

  7. 7.다음을 시도하십시오

    다음을 시도하십시오

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

  8. 8.

    myArray.filter(function(a){ return a.id == some_id_you_want })[0]

  9. 9.findById 메소드 기능 위의 일반적이고 유연 버전 :

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

  10. 10.당신은 쉽게지도 () 함수를 사용하여이를 얻을 수 있습니다 :

    당신은 쉽게지도 () 함수를 사용하여이를 얻을 수 있습니다 :

    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/

  11. 11.당신은 필터를 사용할 수 있습니다

    당신은 필터를 사용할 수 있습니다

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

get_my_obj = getById(73, myArray);

  12. 12.많은 정답이 여기에 있기는하지만, 그들 중 많은 사람들이 한 번 이상하는 경우에이 불필요하게 비용이 많이 드는 작업이다는 사실을 언급하지 않습니다. 극단적 인 경우 이것은 실제 성능 문제의 원인이 될 수 있습니다.

    많은 정답이 여기에 있기는하지만, 그들 중 많은 사람들이 한 번 이상하는 경우에이 불필요하게 비용이 많이 드는 작업이다는 사실을 언급하지 않습니다. 극단적 인 경우 이것은 실제 성능 문제의 원인이 될 수 있습니다.

    현실 세계에서, 당신은 항목 및 성능을 많이 처리하는 경우하면 훨씬 빠르게 처음에 조회를 구축하기 위해의 우려가 있습니다 :

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

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

    당신은 다음과 같이 고정 된 시간 항목에서 얻을 수 있습니다 :

    var bar = o[id];

    또한 조회와 같은 객체 대신지도를 사용하는 것이 좋습니다 : https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Map

  13. 13.

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

    발견하는 경우, 그렇지 않은 경우는 false 객체 요소를 반환

  14. 14.이 여러 번 할 경우, 당신은지도 (ES6)을 설정 할 수 있습니다 :

    이 여러 번 할 경우, 당신은지도 (ES6)을 설정 할 수 있습니다 :

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

    그럼 당신은 간단하게 할 수 있습니다 :

    map.get(27).foo

  15. 15.여기에 내가 나중에 ECMAScript를 3 또는 그 작품을 생각할 수있는 가장 최소한의 방법으로, 순수 자바 스크립트에 대한 가고 싶어 방법입니다. 일치하는 항목이 발견으로 곧으로 반환합니다.

    여기에 내가 나중에 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'

  16. 16.보다 일반적인 짧은

    보다 일반적인 짧은

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

    귀하의 경우 예이다. 당신에게 모든 요소를 ​​줄 것이다 VAR 요소 = findFromArray (myArray의 'ID', 45).

  17. 17.오늘 2020년 6월 20일 내가 선택한 솔루션 크롬 81.0, 파이어 폭스 77.0 사파리 13.1에 맥 OS 높은 시에라에서 테스트를 수행합니다.

    오늘 2020년 6월 20일 내가 선택한 솔루션 크롬 81.0, 파이어 폭스 77.0 사파리 13.1에 맥 OS 높은 시에라에서 테스트를 수행합니다.

    사전 계산 (K, L)와 솔루션은 그들과 비교되지 않습니다 있습니다 (훨씬) 더 빠르게 다른 솔루션보다하고 - 아마 그들이 브라우저 최적화에 빌드 - 특별한을 사용할 수 있습니다

    솔루션

    나는 네 가지 테스트를 수행합니다. 테스트에서 나는 10 루프 반복합니다 (이 반복 동안 ID없는 변화를 객체)에서 5 개체를 찾으려면 - 나는 방법 50 회 테스트를 호출하지만 처음 5 회는 고유 ID 값을 가질 수 있도록 :

    테스트 코드는 다음과 같다

    함수 A (도착, ID) { (O => o.id == ID) arr.find 리턴; } 함수 B (도착, ID) { IDX = arr.findIndex (O => o.id == ID)를 보자; [IDX] 도착 리턴; } 함수 C (도착, ID) { arr.filter (O => o.id == ID)를 반환 [0]; } 함수 D (도착, ID) { 리턴 arr.reduce ((a, b) => (a.id == ID && a) || (b.id == ID && b)); } 함수 E (도착, ID) { 위한 VAR (I = 0; I { 경우 (obj.id == 아이디) { retObj = OBJ; false를 반환; } }); retObj를 반환; } 함수 G (도착, ID) { $ .grep (도착, E => e.id == ID)를 반환 [0]; } 함수 H (도착, ID) { {) $ .MAP (myArray의, 기능 (발을 반환 val.id == ID를 반환? 발 : 널 (null); }) [0]; } 함수 I (도착, ID) { (도착, O => o.id == ID) _.find 리턴; } 하자 J = (() => { 캐시가 새로운지도를 () =하자; 창 함수 J (도착, ID, EL = NULL) { 반환 cache.get (ID) || (EL =) O => o.id == ID (cache.set (ID, EL), 엘 arr.find); } }) (); 함수 K (도착, ID) { 반환 mapK.get (ID) } 함수 L (도착, ID) { 창 MAPL [ID]; } // ------------- // 테스트 // ------------- 을 console.log ( '찾기 아이디 = 5'); .에서 myArray = ... 어레이 (10)], MAP ((X, I) => ({ 'ID' '$ {I}`'갑 '`_ 바 $ {I}}')); CONST MAPK 새로운 맵 = (myArray.map을 (EL => [el.id 엘])); CONST MAPL = {}; myArray.forEach (EL => MAPL [el.id = EL); [A, B, C, D, E, F, G, H, I, J, K, L] .forEach (F => CONSOLE.LOG ( '$ {} f.name $ {JSON.stringify (F (myArray의 '5'))} ')); CONSOLE.LOG ( '항목의 배열'JSON.stringify (myArray의)); <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"> <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"> 이 조각은 선물 테스트 코드를

    예 객체는 항상 존재 검색 작은 배열 크롬에 대한 결과를 테스트

  18. 18.당신은 http://sugarjs.com/에서 Sugarjs을 시도 할 수 있습니다.

    당신은 http://sugarjs.com/에서 Sugarjs을 시도 할 수 있습니다.

    그것은 배열에 아주 달콤한 방법을 가지고, .find. 그래서 당신은이 같은 요소를 찾을 수 있습니다 :

    array.find( {id: 75} );

    당신은 또한 다른 "여기서 절"을 추가로 더 많은 특성을 가진 개체를 전달할 수 있습니다.

    Sugarjs 네이티브 객체를 확장합니다, 어떤 사람들이 매우 악한 생각 ...

  19. 19.허용 대답에 건물 :

    허용 대답에 건물 :

    jQuery를 :

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

    또는 커피 스크립트 :

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

  20. 20.최근에, 나는 거대한 배열에서 문자열을 검색해야하는 같은 일을 직면해야한다.

    최근에, 나는 거대한 배열에서 문자열을 검색해야하는 같은 일을 직면해야한다.

    일부 검색 후 나는 그것은 간단한 코드로 처리하기 쉬운 수 있습니다 발견 :

    암호:

    var items = mydata.filter(function(item){
    return item.word.toLowerCase().startsWith( 'gk );
})

    https://jsfiddle.net/maheshwaghmare/cfx3p40v/4/ 참조

  21. 21.배열에서 항목을 반복. 당신이 방문하는 모든 항목에 대해 해당 항목의 ID를 확인합니다. 일치하는 항목이 있다면, 그것을 돌려줍니다.

    배열에서 항목을 반복. 당신이 방문하는 모든 항목에 대해 해당 항목의 ID를 확인합니다. 일치하는 항목이 있다면, 그것을 돌려줍니다.

    당신은 TEH codez을 원하는 경우 :

    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의 배열 방법을 사용하여 같은 일을 :

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

  22. 22.만큼 브라우저가 ECMA-262, 5 판 (2009.12.11) 지원으로,이, 거의 한 - 라이너를 작동합니다 :

    만큼 브라우저가 ECMA-262, 5 판 (2009.12.11) 지원으로,이, 거의 한 - 라이너를 작동합니다 :

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

  23. 23.당신은 배열을 위해 만들어진 "필터"기능의 모드를 사용하여 순수 자바 스크립트에서이 작업을 수행 할 수 있습니다 :

    당신은 배열을 위해 만들어진 "필터"기능의 모드를 사용하여 순수 자바 스크립트에서이 작업을 수행 할 수 있습니다 :

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

    이제 단순히 값 대신에 키 대신에 "ID"와 "45"통과, 당신이 그 것이다 그래서 전체 오브젝트 (45)의 ID를 일치 얻을 것이다,

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

  24. 24.사용 Array.prototype.filter () 함수.

    사용 Array.prototype.filter () 함수.

    DEMO : 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
  }
 }
];

    필터

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

  25. 25.우리는 JQuery와 방법을 $ .each () / $를 사용할 수 있습니다. 그렙 ()

    우리는 JQuery와 방법을 $ .each () / $를 사용할 수 있습니다. 그렙 ()

    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, 밑줄 https://underscorejs.org/#filter

  26. 26.난 정말 아론 Digulla에서 제공하지만 나중에 반복 할 수 있도록 객체 내 배열을 유지하는 데 필요한 대답을 좋아했다. 그래서 나는 그것을 수정

    난 정말 아론 Digulla에서 제공하지만 나중에 반복 할 수 있도록 객체 내 배열을 유지하는 데 필요한 대답을 좋아했다. 그래서 나는 그것을 수정

    VAR 인덱서 = {}; 경우 (나는 <사항 Array.length; VAR 난 0 = I ++) { 인덱서 [배열 [I] .ID =에서는 parseInt (I); } // 그런 다음 사용하여 배열에 객체의 속성에 액세스 할 수 있습니다 어레이 [인덱서 [ID]. 속성

  27. 27.다른 사람은 () .find 아웃, 지적 배열 내에서 하나 개의 객체를 찾을 때 길을 가야하는 것입니다 것처럼. 개체가이 방법을 사용하여 찾을 수없는 경우, 프로그램이 충돌합니다 : CONST에서 myArray = [{ 'ID' '73', '갑' '바'}, { 'ID' '45', '갑' '바'}]; . CONST 입술 myArray.find = (X => === x.id '100') foo에; // 어 오! / * 오류: "catch되지 않은 형식 오류 : 정의되지 않은 재산 'foo는'읽을 수 없습니다" * /

    다른 사람은 () .find 아웃, 지적 배열 내에서 하나 개의 객체를 찾을 때 길을 가야하는 것입니다 것처럼. 개체가이 방법을 사용하여 찾을 수없는 경우, 프로그램이 충돌합니다 : CONST에서 myArray = [{ 'ID' '73', '갑' '바'}, { 'ID' '45', '갑' '바'}]; . CONST 입술 myArray.find = (X => === x.id '100') foo에; // 어 오! / * 오류: "catch되지 않은 형식 오류 : 정의되지 않은 재산 'foo는'읽을 수 없습니다" * /

    이것은 .find ()의 결과가 그것에 .foo를 사용하여 이전에 정의되어 있는지 검사하여 고정 될 수있다. 현대 JS는 객체가 아니라 코드를 충돌보다 찾을 수없는 경우 우리가 undefined를 반환 옵션 체인으로 쉽게 할 수 있습니다 :

    CONST에서 myArray = [{ 'ID' '73', '갑' '바'}, { 'ID' '45', '갑' '바'}]; CONST 입술 myArray.find = (X => === x.id '100')? foo에; // 오류 없음! CONSOLE.LOG (해상도); // 정의되지 않은 객체를 찾을 수없는 경우

  28. 28.사용하다:

    사용하다:

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

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

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

    이 ID로 객체를 반환해야합니다.

  29. 29.이 솔루션은 도움이뿐만 아니라 할 수있다 :

    이 솔루션은 도움이뿐만 아니라 할 수있다 :

    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처럼 만든 하나의 개체를 찾을 경우, 기능은 오히려 배열보다는 객체를 반환합니다.

  30. 30.aggaton의 대답에서 시작,이 배열과 콜백 함수를 주어진 실제로 원하는 요소 (또는없는 경우는 null)을 반환하는 함수이며, 그 반환 "올바른"요소에 대한 truthy 값 :

    aggaton의 대답에서 시작,이 배열과 콜백 함수를 주어진 실제로 원하는 요소 (또는없는 경우는 null)을 반환하는 함수이며, 그 반환 "올바른"요소에 대한 truthy 값 :

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

    그냥 몇 가지를 지원하지 않는이, IE8-에 기본적으로 일을하지 않는 것을 기억하십시오. polyfill는 양자 택일 항상 루프 고전 거기에 제공 될 수있다 :

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

    실제로보다 빠르고 컴팩트입니다. 당신은 바퀴를 재발견하고 싶지 않은 경우, 나는 밑줄 또는 lodash 같은 유틸리티 라이브러리를 사용하는 것이 좋습니다.

    31. from https://stackoverflow.com/questions/7364150/find-object-by-id-in-an-array-of-javascript-objects by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 이 업로드하기 전에 이미지를 미리보기  (0) 2020.09.21
[JQUERY] 자바 스크립트 / jQuery를 DOM 변경 리스너가 있습니까?  (0) 2020.09.21
[JQUERY] jQuery로 자바 스크립트 객체로 변환 폼 데이터  (0) 2020.09.20
[JQUERY] 어떻게 jQuery를 동적 HTML 요소에 이벤트를 연결합니까? [복제]  (0) 2020.09.20
[JQUERY] 모바일 장치를 감지하는 가장 좋은 방법은 무엇입니까?  (0) 2020.09.20
,

티스토리툴바