How to search a nested array of objects?

Question

I have this array of objects and I can search and find the RoomName, but how do I search through the nested arrays or Areas?

I am getting the RoomName by using any of these

var obj1 = data2.find(o => o.RoomName === 'Room 4');
console.log(obj1);

var abc = data2[data2.findIndex(x => x.RoomName == "Room 1")];
console.log(abc);

var foundValue = data2.filter(obj=>obj.RoomName === 'Room 2');
console.log(foundValue);

console.log(data2.filter(function (arr) { return arr.RoomName == 'Room 4' })[0]);

But I would like to search through the Area's, I have tried this

var obj1 = data2.find(o => o.Areas.AreaName === 'Area 4');
console.log(obj1);

But that isn't working. What I would like to happen is if I find Area 4, then it should return the whole object.. IE

{ "RoomID": 4, "RoomName": "Room 4", "Areas": [{ "id": 4, "AreaName": "Area 4" }, { "id": 40, "AreaName": "Area 40" }] }

$(document).ready(function(){

var data2 = [
            { "RoomID": 1, "RoomName": "Room 1", "Areas": [{ "id": 1, "AreaName": "Area 1" }, { "id": 10, "AreaName": "Area 10" }] },
            { "RoomID": 2, "RoomName": "Room 2", "Areas": [{ "id": 2, "AreaName": "Area 2" }, { "id": 20, "AreaName": "Area 20" }] },
            { "RoomID": 3, "RoomName": "Room 3", "Areas": [{ "id": 3, "AreaName": "Area 3" }, { "id": 30, "AreaName": "Area 30" }, { "id": 35, "AreaName": "Area 35" }] },
            { "RoomID": 4, "RoomName": "Room 4", "Areas": [{ "id": 4, "AreaName": "Area 4" }, { "id": 40, "AreaName": "Area 40" }] }
        ];
        
 
  var obj1 = data2.find(o => o.RoomName === 'Room 4');
 console.log(obj1);

 var abc = data2[data2.findIndex(x => x.RoomName == "Room 1")];
 console.log(abc);

 var foundValue = data2.filter(obj=>obj.RoomName === 'Room 2');
 console.log(foundValue);

 console.log(data2.filter(function (arr) { return arr.RoomName == 'Room 4' })[0]);
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Since others have already answered your question, I figured I'd explain that `o.Areas.AreaName` doesn't work because that's trying to reference an index in `Areas` with the key `AreaName`. (`Areas: [ AreaName: { id: 0 } ]`) — Joseph Webber, Jun 26 '18 at 12:42

Nina Scholz · Answer 1 · 2018-06-26T12:45:42.873

You could take a nested approach with Array#find for the outer array and Array#some for the inner array.

Array.find returns the item if the inner Array.some returns true. The inner callback looks for an area with a given name.

If this condition is true, the inner loop stopps and returns a true to the calling function, which returns the object with the wanted object.

var data2 = [{ RoomID: 1, RoomName: "Room 1", Areas: [{ id: 1, AreaName: "Area 1" }, { id: 10, AreaName: "Area 10" }] }, { RoomID: 2, RoomName: "Room 2", Areas: [{ id: 2, AreaName: "Area 2" }, { id: 20, AreaName: "Area 20" }] }, { RoomID: 3, RoomName: "Room 3", Areas: [{ id: 3, AreaName: "Area 3" }, { id: 30, AreaName: "Area 30" }, { id: 35, AreaName: "Area 35" }] }, { RoomID: 4, RoomName: "Room 4", Areas: [{ id: 4, AreaName: "Area 4" }, { id: 40, AreaName: "Area 40" }] }];
    obj1 = data2.find(({ Areas }) => Areas.some(({ AreaName }) => AreaName === "Area 4"));

console.log(obj1);

.as-console-wrapper { max-height: 100% !important; top: 0; }

score 0 · Answer 2 · answered Jun 26 '18 at 12:32

This appears to be a repeat of previous questions. There is no built-in deep object search method in javascript, but you can use recursion to find the value of a nested object.

score 0 · Answer 3 · answered Jun 26 '18 at 12:35

You can use filter and some to tests whether at least one element in the array has AreaName equals to the searched variable.

var data2 = [{"RoomID":1,"RoomName":"Room 1","Areas":[{"id":1,"AreaName":"Area 1"},{"id":10,"AreaName":"Area 10"}]},{"RoomID":2,"RoomName":"Room 2","Areas":[{"id":2,"AreaName":"Area 2"},{"id":20,"AreaName":"Area 20"}]},{"RoomID":3,"RoomName":"Room 3","Areas":[{"id":3,"AreaName":"Area 3"},{"id":30,"AreaName":"Area 30"},{"id":35,"AreaName":"Area 35"}]},{"RoomID":4,"RoomName":"Room 4","Areas":[{"id":4,"AreaName":"Area 4"},{"id":40,"AreaName":"Area 40"}]}]

var AreaNameToSearch = 'Area 4';
var obj1 = data2.find(o => o.Areas.some(x => x.AreaName === AreaNameToSearch));

console.log(obj1);

score 0 · Answer 4 · answered Jun 26 '18 at 12:37

You can make a double filter to iterate over the areas and return only when it meets your condition.

var areaObj = data2.filter(o=> {
  return o.Areas.filter(a=>{ 
    return a.AreaName == 'Area 4'
  }).length > 0
})

Hope this helps :>

$(document).ready(function() {

  var data2 = [{
      "RoomID": 1,
      "RoomName": "Room 1",
      "Areas": [{
        "id": 1,
        "AreaName": "Area 1"
      }, {
        "id": 10,
        "AreaName": "Area 10"
      }]
    },
    {
      "RoomID": 2,
      "RoomName": "Room 2",
      "Areas": [{
        "id": 2,
        "AreaName": "Area 2"
      }, {
        "id": 20,
        "AreaName": "Area 20"
      }]
    },
    {
      "RoomID": 3,
      "RoomName": "Room 3",
      "Areas": [{
        "id": 3,
        "AreaName": "Area 3"
      }, {
        "id": 30,
        "AreaName": "Area 30"
      }, {
        "id": 35,
        "AreaName": "Area 35"
      }]
    },
    {
      "RoomID": 4,
      "RoomName": "Room 4",
      "Areas": [{
        "id": 4,
        "AreaName": "Area 4"
      }, {
        "id": 40,
        "AreaName": "Area 40"
      }]
    }
  ];


var areaObj = data2.filter(o=>o.Areas.filter(a=> a.AreaName == 'Area 4').length > 0)

console.log(areaObj)

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

How to search a nested array of objects?

4 Answers4