Get JavaScript object from array of objects by value of property

Question

Let s say I have an array of four objects   var jsObjects         a  1  b  2        a  3  b  4        a  5  b  6        a  7  b  8       Is there a way that I can get the third object   a  5  b  6   by the value of the property b for example without a for   in loop

User · Answer

To get first object from array of objects by a specific property value:

_x000D_

function getObjectFromObjectsArrayByPropertyValue(objectsArray, propertyName, propertyValue) {_x000D_
  return objectsArray.find(function (objectsArrayElement) {_x000D_
    return objectsArrayElement[propertyName] == propertyValue;_x000D_
  });_x000D_
}_x000D_
_x000D_
function findObject () {_x000D_
  var arrayOfObjectsString = document.getElementById("arrayOfObjects").value,_x000D_
      arrayOfObjects,_x000D_
      propertyName = document.getElementById("propertyName").value,_x000D_
      propertyValue = document.getElementById("propertyValue").value,_x000D_
      preview = document.getElementById("preview"),_x000D_
      searchingObject;_x000D_
  _x000D_
  arrayOfObjects = JSON.parse(arrayOfObjectsString);_x000D_
  _x000D_
  console.debug(arrayOfObjects);_x000D_
  _x000D_
  if(arrayOfObjects && propertyName && propertyValue) {_x000D_
    searchingObject = getObjectFromObjectsArrayByPropertyValue(arrayOfObjects, propertyName, propertyValue);_x000D_
    if(searchingObject) {_x000D_
      preview.innerHTML = JSON.stringify(searchingObject, false, 2);_x000D_
    } else {_x000D_
      preview.innerHTML = "there is no object with property " + propertyName + " = " + propertyValue + " in your array of objects";_x000D_
    }_x000D_
  }_x000D_
}

_x000D_

pre {_x000D_
  padding: 5px;_x000D_
  border-radius: 4px;_x000D_
  background: #f3f2f2;_x000D_
}_x000D_
_x000D_
textarea, button {_x000D_
  width: 100%_x000D_
}

_x000D_

<fieldset>_x000D_
  <legend>Input Data:</legend>_x000D_
  <label>Put here your array of objects</label>_x000D_
  <textarea rows="7" id="arrayOfObjects">_x000D_
  [_x000D_
    {"a": 1, "b": 2},_x000D_
    {"a": 3, "b": 4},_x000D_
    {"a": 5, "b": 6},_x000D_
    {"a": 7, "b": 8, "c": 157}_x000D_
  ]_x000D_
  </textarea>_x000D_
_x000D_
  <hr>_x000D_
_x000D_
  <label>property name: </label> <input type="text" id="propertyName"  value="b"/>_x000D_
  <label>property value: </label> <input type="text" id="propertyValue" value=6 />_x000D_
     _x000D_
</fieldset>_x000D_
<hr>_x000D_
<button onclick="findObject()">find object in array!</button>_x000D_
<hr>_x000D_
<fieldset>_x000D_
  <legend>Searching Result:</legend>_x000D_
  <pre id="preview">click find</pre>_x000D_
</fieldset>

_x000D_

User · Answer

It looks like in the ECMAScript 6 proposal there are the Array methods find   and findIndex    MDN also offers polyfills which you can include to get the functionality of these across all browsers   find     function isPrime element  index  array        var start   2      while  start  lt   Math sqrt element             if  element   start    lt  1  return false            return  element  gt  1      console log   4  6  8  12  find isPrime        undefined  not found console log   4  5  8  12  find isPrime        5   findIndex     function isPrime element  index  array        var start   2      while  start  lt   Math sqrt element             if  element   start    lt  1  return false            return  element  gt  1      console log   4  6  8  12  findIndex isPrime        -1  not found console log   4  6  7  12  findIndex isPrime        2

User · Answer

I don t know why you are against a for loop  presumably you meant a for loop  not specifically for  in   they are fast and easy to read  Anyhow  here s some options  For loop  function getByValue arr  value       for  var i 0  iLen arr length  i lt iLen  i           if  arr i  b    value  return arr i           filter function getByValue2 arr  value       var result    arr filter function o  return o b    value         return result  result 0    null     or undefined      forEach function getByValue3 arr  value       var result          arr forEach function o  if  o b    value  result push o          return result  result 0    null     or undefined     If  on the other hand you really did mean for  in and want to find an object with any property with a value of 6  then you must use for  in unless you pass the names to check  Example function getByValue4 arr  value      var o     for  var i 0  iLen arr length  i lt iLen  i          o   arr i        for  var p in o          if  o hasOwnProperty p   amp  amp  o p     value            return o

User · Answer

Using underscore js   var foundObject     findWhere jsObjects   b  6

User · Answer

jsObjects find x   gt  x b     6    From MDN      The find   method returns a value in the array  if an element in the array satisfies the provided testing function  Otherwise undefined is returned      Side note  methods like find   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

User · Answer

How about using   find collection   predicate   identity    fromIndex 0   of lo-dash to get object from array of objects by object property value  You could do something like this    var o     find jsObjects    b   6      Arguments    collection  Array Object   The collection to inspect   predicate   identity   Function   The function invoked per iteration   fromIndex 0   number   The index to search from    Returns       Returns the matched element  in your case   a  5  b  6    else undefined    In terms of performance    find   is faster as it only pulls the first object with property   b   6   on the other hand  if suppose your array contains multiple objects with matching set of properties  key value   then you should consider using   filter   method  So in your case  as your array has a single object with this property  I would use   find

User · Answer

You can use it with the arrow function as well like as below    var demoArray         name   apples   quantity  2       name   bananas   quantity  0       name   cherries   quantity  5      var result   demoArray filter  obj   gt  obj name      apples   0   console log result       name   apples   quantity  2

User · Answer

Try Array filter method for filter the array of objects with property   var jsObjects         a  1  b  2        a  3  b  4        a  5  b  6        a  7  b  8       using array filter method   var filterObj   jsObjects filter function e      return e b    6        using for in loop    for  var i in jsObjects      if  jsObjects i  b    6        console log jsObjects i        a  5  b  6          Working fiddle   https   jsfiddle net uq9n9g77

User · Answer

var result   jsObjects filter x  gt  x b     6     will be better  using return in filter sometimes you can t get result  I dunno why

User · Answer

OK  there are few ways to do that  but let s start with the simplest one and latest approach to do this  this function is called find     Just be careful when you using find to as even IE11 dosn t support it  so it needs to be transpiled     so you have this object as you said   var jsObjects         a  1  b  2        a  3  b  4        a  5  b  6        a  7  b  8       and you can write a function and get it like this   function filterValue obj  key  value      return obj find function v   return v key      value        and use the function like this   filterValue jsObjects   b   6      a  5  b  6    Also in ES6 for even shortened version   const filterValue    obj  key  value   gt  obj find v   gt  v key      value     This method only return the first value which match     for better result and browser support  you can use filter   const filterValue    obj  key  value   gt  obj filter v   gt  v key      value     and we will return   a  5  b  6       This method will return an array instead     You simpley use for loop as well  create a function like this   function filteredArray arr  key  value      const newArray         for i 0  l arr length  i lt l  i          if arr i  key      value          newArray push arr i               return newArray      and call it like this   filteredArray jsObjects   b   6       a  5  b  6

User · Answer

Using find with bind to pass specific key values to a callback function       function byValue o            return o a     this a  amp  amp  o b     this b                var result   jsObjects find byValue bind   a  5  b  6

User · Answer

See this documentation Array prototype find   Example  var inventory          name   apples   quantity  2        name   bananas   quantity  0        name   cherries   quantity  5      function findCherries fruit         return fruit name      cherries      console log inventory find findCherries          name   cherries   quantity  5

User · Answer

If you are looking for a single result  rather than an array  may I suggest reduce    Here is a solution in plain  ole javascript that returns a matching object if one exists  or null if not   var result   arr reduce function prev  curr    return  curr b     6    curr   prev     null

User · Answer

If I understand correctly  you want to find the object in the array whose b property is 6   var found  jsObjects some function  obj      if  obj b     6        found   obj      return true            Or if you were using underscore   var found     select jsObjects  function  obj      return obj b     6

User · Answer

Made the best fastest part of this answer more re-usable  amp  clear   function getElByPropVal myArray  prop  val       for  var i   0  length   myArray length  i  lt  length  i              if  myArray i  prop     val               return myArray i

User · Answer

Filter array of objects  which property matches value  returns array   var result   jsObjects filter obj   gt      return obj b     6      See the MDN Docs on Array prototype filter     x000D   x000D  const jsObjects     x000D     a  1  b  2    x000D     a  3  b  4    x000D     a  5  b  6    x000D     a  7  b  8  x000D    x000D   x000D  let result   jsObjects filter obj   gt    x000D    return obj b     6 x000D     x000D   x000D  console log result  x000D   x000D   x000D    Find the value of the first element object in the array  otherwise undefined is returned   var result   jsObjects find obj   gt      return obj b     6      See the MDN Docs on Array prototype find     x000D   x000D  const jsObjects     x000D     a  1  b  2    x000D     a  3  b  4    x000D     a  5  b  6    x000D     a  7  b  8  x000D    x000D   x000D  let result   jsObjects find obj   gt    x000D    return obj b     6 x000D     x000D   x000D  console log result  x000D   x000D   x000D

User · Answer

var jsObjects     a  1  b  2    a  3  b  4    a  5  b  6    a  7  b  8      to access the third object  use  jsObjects 2   to access the third object b value  use  jsObjects 2  b

[javascript] Get JavaScript object from array of objects by value of property

Examples related to javascript

Examples related to arrays