JavaScript-在对象数组中的对象数组中查找对象

Question

I'm using Vue, lodash, etc.

{
  "street": {
    "id": "1",
    "streetName": "test",
    "buildings": [
      {
        "id": "1",
        "buildingName": "test"
      }
    ]
  }
}

I have a setup similar to this. This is a singular object, I basically have an array of these.

All I get is a building.id value.

From it, I need to be able to find the building it belongs to, and there isn't any direct list of buildings for me to access.

Currently

I'm using a nested loop to loop through each site until I find the one that has a building with that id. I don't know if I'm doing it correctly, it doesn't feel correct.

for(var i = 0; i < streets.length; i++){
    for(var x = 0; x < streets[i].buildings.length;x++){
        if(streets[i].buildings[x].id == '2aec6bed-8cdd-4043-9041-3db4681c6d08'){   

        }
    }
}

Any tips? Thanks.

Answer 1

You can use a combination of filter and some methods, like this:

var result = streets.filter(function(s) {
  return s.street.buildings.some(function(b) {
    return b.id === searchedId;
  });
});

• Using .some() method will return true if any building of the iterated buildings has the searchedId .
• Using .filter() will filter the streets array to return only street object where the call of some() method on its buildings will return true , in other words which meets the condition of having an id equal to searchedId .

Demo:

 var streets = [{ "street": { "id": "1", "streetName": "test", "buildings": [{ "id": "1", "buildingName": "test" }] } }, { "street": { "id": "1", "streetName": "test", "buildings": [{ "id": '2aec6bed-8cdd-4043-9041-3db4681c6d08', "buildingName": "test" }] } }]; var searchedId = '2aec6bed-8cdd-4043-9041-3db4681c6d08'; var result = streets.filter(function(s) { return s.street.buildings.some(function(b) { return b.id === searchedId; }); }); console.log(result); 

Answer 2

If you're trying to get all the buildings in all streets by a buildingId , this solves the problem:

streetsList.map(streetItem => streetItem.street.buildings.find(building => building.id === searchedBuildingId)).filter(v => v);

.filter(v => v) is for filtering out falsy values since we want a clean result here.

If there can be more than a single building in a street with the same id , then use .some instead of .find in the example.

Answer 3

Presumably you have a streets object that contains street objects, like:

var streets = [
  street :{ ...  },
  street :{ ...  },
  ...
];

So you need to step into each street and iterate over the buildings. A for loop should be fairly efficient since it can return as soon as it finds the building. I don't think any of the built-in looping methods will do that.

The code in the OP won't work, as streets[i].buildings must be streets[i].streets.buildings and if(streets[i].buildings[x].id must be if(streets[i].street.buildings[x].id .

Below is a working for loop version, there's also a version using recent Array methods which are very much slower even on a very small dataset. According to jsperf , the for loop version is about 100 times faster in Safari, 10 times faster in Firefox and 50 times faster in Chrome.

I also think the for loop code is much more readable and therefore maintainable.

 var streets = [{ "street": { "id": "1", "streetName": "test", "buildings": [{ "id": "1", "buildingName": "test" }, { "id": "2", "buildingName": "test" }] } }, { "street": { "id": "2", "streetName": "test", "buildings": [{ "id": "3", "buildingName": "test" }] } } ]; function getBldById(data, id) { for (var i=0, iLen=streets.length; i<iLen; i++) { var street = streets[i].street; for (var j=0, jLen=street.buildings.length; j<jLen; j++) { if (street.buildings[j].id == id) { return street.buildings[j]; } } } return null; } console.log(getBldById(streets, '1')); function getBldById2(data, id) { return data.map(streetObj => streetObj.street.buildings.find(building => building.id === id) ).filter(v => v)[0]; } console.log(getBldById2(streets, '1')); 

Answer 4

You might be missing street property, right? I mean it should be: streets[i].street.buildings[x].id