首页 文章

在JavaScript对象数组中按id查找对象

提问于
浏览
1195

我有一个数组:

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

我'm unable to change the structure of the array. I' m传递的是 45 的id,我想在数组中获得该对象的 'bar' .

我如何在JavaScript或使用jQuery中执行此操作?

30 回答

  • 0

    您可以使用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/

  • 0

    即使在纯JavaScript中也可以使用内置的“过滤器”函数对数组执行此操作:

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

    所以现在简单地用"id"代替 key 和"45"来代替 value ,你将获得匹配id为45的完整对象 . 那就是,

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

    使用jQuery的过滤方法:

    $(myArray).filter(function()
     {
         return this.id == desiredId;
     }).first();
    

    这将返回具有指定Id的第一个元素 .

    它还具有良好的C#LINQ外观格式 .

  • 13

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

    它没有外部库 . 但是如果你想要older browser support,你可能想要包含this polyfill .

  • 10

    使用 Array.prototype.filter() 功能 .

    DEMOhttps://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;
        });
    }
    
  • 6
    myArray.filter(function(a){ return a.id == some_id_you_want })[0]
    
  • -5

    你可以试试http://sugarjs.com/的Sugarjs .

    它在Arrays上有一个非常甜蜜的方法, .find . 所以你可以找到这样的元素:

    array.find( {id: 75} );
    

    您还可以将具有更多属性的对象传递给它以添加另一个“where-clause” .

    请注意,Sugarjs扩展了原生对象,有些人认为这非常邪恶......

  • 65

    使用:

    var retObj ={};
    $.each(ArrayOfObjects, function (index, obj) {
    
            if (obj.id === '5') { // id.toString() if it is int
    
                retObj = obj;
                return false;
            }
        });
    return retObj;
    

    它应该通过id返回一个对象 .

  • 0

    以下是我在纯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'
    
  • 346

    我认为最简单的方法如下,但它不适用于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
    
  • 42

    如果多次这样做,您可以设置一个 Map (ES6):

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

    然后你可以简单地做:

    map.get(27).foo
    
  • 567

    使用原生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

  • 2

    我们可以使用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

  • 4

    最短,

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

    将“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;
    }
    
  • 10

    Underscore.js有一个不错的方法:

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

    更通用,更短

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

    在你的情况下 . var element = findFromArray(myArray,'id',45) 将为您提供整个元素 .

  • 14

    虽然这里有许多正确的答案,但是其中许多都没有解决这样一个事实:如果不止一次这样做,这是一个不必要的昂贵操作 . 在极端情况下,这可能是真正的性能问题的原因 .

    在现实世界中,如果您正在处理大量项目并且性能是一个问题,那么最初构建查找要快得多:

    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

  • 4

    只要浏览器支持ECMA-262,第5版(2009年12月),这应该可行,几乎是单行:

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

    我真的很喜欢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
    
  • 3

    在接受的答案的基础上:

    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
    
  • 2

    aggaton's answer开始,这是一个实际返回有用元素的函数(如果没有找到 null ),给定 arraycallback 函数返回"correct"元素的真值:

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

    请记住,这不支持 some . 可以提供polyfill,或者总是经典 for 循环:

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

    它实际上更快,更紧凑 . 但是如果你不想重新发明轮子,我建议使用像下划线或lodash这样的实用程序库 .

  • 1

    使用 find() 方法:

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

    MDN

    如果数组中的元素满足提供的测试函数,则find()方法返回数组中的值 . 否则返回undefined .


    如果要查找其索引,请使用 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);
    

    旁注:旧版浏览器(如IE)不支持 find()filter()arrow functions等方法,因此如果要支持这些浏览器,则应使用Babel(使用polyfill)来编译代码 . ) .

  • 1

    上面的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');
    
  • 1428

    另一种解决方案是创建查找对象:

    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和对象将被共享 .

  • 2

    迭代数组中的任何项目 . 对于您访问的每件商品,请检查该商品的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];
    }
    
  • 30

    请尝试以下方法

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

    由于您已经在使用jQuery,因此可以使用grep函数来搜索数组:

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

    结果是一个包含找到的项目的数组 . 如果您知道对象始终存在并且只出现一次,则可以使用 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
    }
    
  • 3

    此解决方案也可能有用:

    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 一样,如果找到一个对象,函数将返回对象,而不是数组 .

  • 139

    你可以使用过滤器,

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

相关问题