Find object by id in an array of JavaScript objects

Question

I ve got an array   myArray      id   73   foo   bar     id   45   foo   bar    etc     I m unable to change the structure of the array  I m being passed an id of 45  and I want to get  bar  for that object in the array    How do I do this in JavaScript or using jQuery

User · Answer

myArray filter function a   return a id    some id you want    0

User · Answer

While there are many correct answers here  many of them do not address the fact that this is an unnecessarily expensive operation if done more than once  In an extreme case this could be the cause of real performance problems   In the real world  if you are processing a lot of items and performance is a concern it s much faster to initially build a lookup   var items      id   73   foo   bar     id   45   foo   bar      var lookup   items reduce  o i   gt o i id  o        you can then get at items in fixed time like this     var bar   o id     You might also consider using a Map instead of an object as the lookup  https   developer mozilla org en docs Web JavaScript Reference Global Objects Map

User · Answer

Try the following  function findById source  id      for  var i   0  i  lt  source length  i          if  source i  id     id          return source i               throw  Couldn t find object with id      id

User · Answer

As long as the browser supports ECMA-262  5th edition  December 2009   this should work  almost one-liner   var bFound   myArray some function  obj        return obj id     45

User · Answer

As others have pointed out   find   is the way to go when looking for one object within your array  However  if your object cannot be found using this method  your program will crash   x000D   x000D  const myArray      id   73   foo   bar     id   45   foo   bar     x000D  const res   myArray find x   gt  x id      100   foo     Uh oh  x000D     x000D  Error  x000D   Uncaught TypeError  Cannot read property  foo  of undefined  x000D     x000D   x000D   x000D    This can be fixed by checking whether the result of  find   is defined before using using  foo on it  Modern JS allows us to do this easily with optional chaining  returning undefined if the object cannot be found  rather than crashing your code    x000D   x000D  const myArray      id   73   foo   bar     id   45   foo   bar     x000D  const res   myArray find x   gt  x id      100    foo     No error  x000D  console log res      undefined when the object cannot be found x000D   x000D   x000D

User · Answer

Shortest   var theAnswerObj     findWhere array   id   42

User · Answer

Here s how I d go about it in pure JavaScript  in the most minimal manner I can think of that works in ECMAScript 3 or later  It returns as soon as a match is found   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

User · Answer

This solution may helpful as well   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  lt  2   ret 0    ret     var bar   myArray grep  id   45      I made it just like   grep and if one object is find out  function will return the object  rather than an array

User · Answer

Starting from aggaton s answer  this is a function that actually returns the wanted element  or null if not found   given the array and a callback function that returns a truthy value for the  correct  element   function findElement array  callback        var elem      return array some function e            if  callback e                 elem   e              return true                     elem   null        Just remember that this doesn t natively work on IE8-  as it doesn t support some  A polyfill can be provided  alternatively there s always the classic for loop   function findElement array  callback        for  var i   0  i  lt  array length  i            if  callback array i    return array i       return null        It s actually faster and more compact  But if you don t want to reinvent the wheel  I suggest using an utility library like underscore or lodash

User · Answer

You can do this even in pure JavaScript by using the in built  filter  function for arrays   Array prototype filterObjects   function key  value        return this filter function x    return x key      value         So now simply pass  id  in place of key and  45  in place of value  and you will get the full object matching an id of 45  So that would be   myArr filterObjects  id    45

User · Answer

You can use filters     function getById id  myArray        return myArray filter function obj          if obj id    id            return obj                 0       get my obj   getById 73  myArray

User · Answer

Performance Today 2020 06 20 I perform test on MacOs High Sierra on Chrome 81 0  Firefox 77 0 and Safari 13 1 for chosen solutions  Conclusions for solutions which use precalculations Solutions with precalculations  K L   are  much much  faster than other solutions and will not be compared with them - probably they are use some special build-in browser optimisations  surprisingly on Chrome and Safari solution based on Map  K  are much faster than solution based on object     L  surprisingly on Safari for small arrays solution based on object     L  is slower than traditional for  E  surprisingly on Firefox for small arrays solution based on Map  K  is slower than traditional for  E   Conclusions when searched objects ALWAYS exists  solution which use traditional for  E  is fastest for small arrays and fast for big arrays solution using cache  J  is fastest for big arrays - surprisingly for small arrays is medium fast solutions based on find  A  and findIndex  B  are fast for small arras and medium fast on big arrays solution based on   map  H  is slowest on small arrays solution based on reduce  D  is slowest on big arrays   Conclusions when searched objects NEVER exists  solution based on traditional for  E  is fastest on small and big arrays  except Chrome-small arrays where it is second fast  solution based on reduce  D  is slowest on big arrays solution which use cache  J  is medium fast but can be speed up if we save in cache also keys which have null values  which was not done here because we want to avoid unlimited memory consumption in cache in case when many not existing keys will be searched    Details For solutions  without precalculations  A B C D E F G H I J  the J solution use  inner  cache and it speed depend on how often searched elements will repeat  with precalculations K L  I perform four tests  In tests I want to find 5 objects in 10 loop iterations  the objects ID not change during iterations  - so I call tested method 50 times but only first 5 times have unique id values   small array  10 elements  and searched object ALWAYS exists - you can perform it HERE big array  10k elements  and searched object ALWAYS exist - you can perform it HERE small array  10 elements  and searched object NEVER exists - you can perform it HERE big array  10k elements  and searched object NEVER exists - you can perform it HERE  Tested codes are presented below  x000D   x000D  function A arr  id      return arr find o  gt  o id  id      function B arr  id      let idx  arr findIndex o  gt  o id  id     return arr idx      function C arr  id      return arr filter o  gt  o id  id  0      function D arr  id      return arr reduce  a  b    gt   a id  id  amp  amp  a      b id    id  amp  amp  b       function E arr  id      for  var i   0  i  lt  arr length  i    if  arr i  id  id  return arr i     return null     function F arr  id      var retObj          each arr   index  obj    gt        if  obj id    id           retObj   obj        return false                return retObj     function G arr  id      return   grep arr  e  gt  e id    id   0      function H arr  id      return   map myArray  function val        return val id    id   val   null       0      function I arr  id      return   find arr  o   gt  o id  id      let J        gt     let cache   new Map      return function J arr id el null         return cache get id      el arr find o  gt  o id  id   cache set id el   el              function K arr  id      return mapK get id     function L arr  id      return mapL id           -------------    TEST    -------------  console log  Find id 5     myArray       Array 10   map  x i   gt     id     i     foo   bar   i       const mapK   new Map  myArray map el   gt   el id  el      const mapL       myArray forEach el   gt  mapL el id  el       A B C D E F G H I J K L  forEach f  gt  console log    f name     JSON stringify f myArray   5          console log  Whole array  JSON stringify myArray    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 5 1 jquery min js  gt  lt  script gt   lt script src  https   cdnjs cloudflare com ajax libs lodash js 4 17 15 lodash min js  gt  lt  script gt   This snippet only presents tested codes x000D   x000D   x000D   Example tests results for Chrome for small array where searched objects always exists

User · Answer

My way to find index of array   index   myArray map  i    gt  i id  indexOf value of id   item   myArray index

User · Answer

Use   var retObj        each ArrayOfObjects  function  index  obj             if  obj id      5        id toString   if it is int              retObj   obj              return false                    return retObj    It should return an object by id

User · Answer

I really liked the answer provided by Aaron Digulla but needed to keep my array of objects so I could iterate through it later   So I modified it to    x000D   x000D   var indexer       x000D   for  var i   0  i  lt  array length  i      x000D       indexer array i  id    parseInt i   x000D     x000D    x000D     Then you can access object properties in your array using  x000D   array indexer id   property x000D   x000D   x000D

User · Answer

We can use Jquery methods   each     grep    var data        each array function i  if n     5  amp  amp  i  gt  4  data push item      or   var data     grep array  function  n  i       return   n     5  amp  amp  i  gt  4          use ES6 syntax    Array find  Array filter  Array forEach  Array map   Or use Lodash https   lodash com docs 4 17 10 filter  Underscore https   underscorejs org  filter

User · Answer

Consider  axesOptions  to be array of objects with an object format being   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

User · Answer

Dynamic cached find In this solution  when we search for some object  we save it in cache  This is middle point between  quot always search solutions quot  and  quot create hash-map for each object in precalculations quot    x000D   x000D  let cachedFind        gt     let cache   new Map      return  arr id el null    gt       cache get id      el arr find o  gt  o id  id   cache set id el   el              ---------    TEST    ---------  let myArray       Array 100000   map  x i   gt     id     i     foo   bar   i           example usage  console log  cachedFind myArray  1234   foo            Benchmark  let bench    id    gt      console time     time for   id       console log      cachedFind myArray id  foo        FIND   console timeEnd  time for   id       console log  ----- no cached -----    bench 50000   bench 79980   bench 99990   console log  -----  cached   -----    bench 79980      cached bench 99990      cached x000D   x000D   x000D

User · Answer

Building on the accepted answer   jQuery   var foo     grep myArray  function e   return e id     foo id   myArray pop foo    Or CoffeeScript   foo     grep myArray   e  - gt  e id    foo id myArray pop foo

User · Answer

You may try out Sugarjs from http   sugarjs com    It has a very sweet method on Arrays   find  So you can find an element like this   array find   id  75       You may also pass an object with more properties to it to add another  where-clause    Note that Sugarjs extends native objects  and some people consider this very evil

User · Answer

Recently  I have to face the same thing in which I need to search the string from a huge array   After some search I found It ll be easy to handle with simple code   Code   var items   mydata filter function item       return item word toLowerCase   startsWith   gk         See https   jsfiddle net maheshwaghmare cfx3p40v 4

User · Answer

More generic and short  function findFromArray array key value            return array filter function  element                return element key     value             shift        in your case Ex  var element   findFromArray myArray  id  45  that will give you the whole element

User · Answer

Use Array prototype filter   function   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             FILTER  var getPerson   function name       return jsonObj filter function obj          return obj name     name

User · Answer

Use the find   method   myArray find x   gt  x id      45   foo    From MDN      The find   method returns the first value in the array  if an element in the array satisfies the provided testing function  Otherwise undefined is returned      If you want to find its index instead  use findIndex     myArray findIndex x   gt  x id      45      From MDN      The findIndex   method returns the index of the first element in the array that satisfies the provided testing function  Otherwise -1 is returned      If you want to get an array of matching elements  use the filter   method instead   myArray filter x   gt  x id      45      This will return an array of objects  If you want to get an array of foo properties  you can do this with the map   method   myArray filter x   gt  x id      45   map x   gt  x foo       Side note  methods like find   or filter    and arrow functions are not supported by older browsers  like IE   so if you want to support these browsers  you should transpile your code using Babel  with the polyfill

User · Answer

You can get this easily using the map   function   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       Working example  http   jsfiddle net hunter Pxaua

User · Answer

Underscore js has a nice method for that   myArray      id   73   foo   bar     id   45   foo   bar   etc   obj     find myArray  function obj    return obj id     45

User · Answer

Using native 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  amp  amp  a      b id    id  amp  amp  b       returns the object element if found  otherwise false

User · Answer

Use the filter method of jQuery      myArray  filter function           return this id    desiredId      first      That will return the first element with the specified Id    It also has the benefit of a nice C  LINQ looking format

User · Answer

Iterate over any item in the array  For every item you visit  check that item s id  If it s a match  return it   If you just want teh codez   function getId array  id        for  var i   0  len   array length  i  lt  len  i              if  array i  id     id                return array i                       return null     Nothing found     And the same thing using ECMAScript 5 s Array methods   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

User · Answer

I think the easiest way would be the following  but it won t work on Internet nbsp Explorer nbsp 8  or earlier    var result   myArray filter function v        return v id      45      Filter out the appropriate one    0  foo     Get result and access the foo property

User · Answer

A generic and more flexible version of the findById function above      array     key value   key value   function objectFindByKey array  key  value        for  var i   0  i  lt  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

User · Answer

Another solution is to create a lookup object   var lookup       for  var i   0  len   array length  i  lt  len  i          lookup array i  id    array i          now you can use lookup id       This is especially interesting if you need to do many lookups   This won t need much more memory since the IDs and objects will be shared

User · Answer

If you do this multiple times  you may set up a Map  ES6    const map   new Map  myArray map el   gt   el id  el        Then you can simply do   map get 27  foo

User · Answer

As you are already using jQuery  you can use the grep function which is intended for searching an array   var result     grep myArray  function e   return e id    id        The result is an array with the items found  If you know that the object is always there and that it only occurs once  you can just use result 0  foo to get the value  Otherwise you should check the length of the resulting array  Example   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

User · Answer

ECMAScript 2015  JavaScript ES6  provides the find   method on arrays   x000D   x000D  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   gt  item id     2       print console log item name   x000D   x000D   x000D   It works without external libraries  But if you want older browser support you might want to include this polyfill

[javascript] Find object by id in an array of JavaScript objects

Examples related to javascript

Examples related to jquery

Examples related to arrays

Examples related to javascript-objects