Retrieving object by a value within a nested array in Javascript

Question

Retrieving object by a value within a nested array in Javascript

I need to retrieve all objects that have a specific 'id' within a nested array. Specifically, I want to find all person objects with hobbies id of 2 (hiking) in the provided sample data.

This inquiry tackles the challenge of extracting all values from an array based on an object value.

What sets this question apart from the previous one is that it requires fetching all objects based on a value found inside a nested array.

[  
   {  
      "id":111222,
      "name":"Faye",
      "age":27,
      "hobbies":[  
         {  
            "id":2,
            "name":"hiking"
         },
         {  
            "id":3,
            "name":"eating"
         }
      ]
   },
   {  
      "id":223456789001,
      "name":"Bobby",
      "age":35,
      "hobbies":[  
         {  
            "id":2,
            "name":"hiking"
         },
         {  
            "id":4,
            "name":"online gaming"
         }
      ]
   }
]

javascript arrays json

Answer 1

Answer №1

const hasInterest = (user, interestId) => {
  return user.interests.some((interest) => {
    return interest.id === interestId;
  });
}

const filterByInterest = (users, interestId) => {
  return users.filter((user) => {
    return hasInterest(user, interestId);
  });
}

If you prefer the new, trendy ES6 syntax:

const filterByInterest = (users, interestId) => {
  return users.filter(
    (user) => user.interests.some(
      (interest) => interest.id === interestId
    )
  );
}

Answer 2

const hasInterest = (user, interestId) => {
  return user.interests.some((interest) => {
    return interest.id === interestId;
  });
}

const filterByInterest = (users, interestId) => {
  return users.filter((user) => {
    return hasInterest(user, interestId);
  });
}

If you prefer the new, trendy ES6 syntax:

const filterByInterest = (users, interestId) => {
  return users.filter(
    (user) => user.interests.some(
      (interest) => interest.id === interestId
    )
  );
}

Answer 3

Answer №2

const data = [  
   {  
      "id":111222,
      "name":"Faye",
      "age":27,
      "hobbies":[  
         {  
            "id":2,
            "name":"hiking"
         },
         {  
            "id":3,
            "name":"eating"
         }
      ]
   },
   {  
      "id":223456789001,
      "name":"Bobby",
      "age":35,
      "hobbies":[  
         {  
            "id":2,
            "name":"hiking"
         },
         {  
            "id":4,
            "name":"online gaming"
         }
      ]
   }
];

const filteredData = data.filter(function(person) {
 let hobbies = person.hobbies;
 let hasHiking = hobbies.some(function(hob) {
     return hob.id === 2;
});

return hasHiking;
});

Answer 4

const data = [  
   {  
      "id":111222,
      "name":"Faye",
      "age":27,
      "hobbies":[  
         {  
            "id":2,
            "name":"hiking"
         },
         {  
            "id":3,
            "name":"eating"
         }
      ]
   },
   {  
      "id":223456789001,
      "name":"Bobby",
      "age":35,
      "hobbies":[  
         {  
            "id":2,
            "name":"hiking"
         },
         {  
            "id":4,
            "name":"online gaming"
         }
      ]
   }
];

const filteredData = data.filter(function(person) {
 let hobbies = person.hobbies;
 let hasHiking = hobbies.some(function(hob) {
     return hob.id === 2;
});

return hasHiking;
});

Answer 5

Answer №3

Here's a potential solution for your issue:

const people = [{
  "id": 111222,
  "name": "Faye",
  "age": 27,
  "hobbies": [{
    "id": 2,
    "name": "hiking"
  }, {
    "id": 3,
    "name": "eating"
  }]
}, {
  "id": 223456789001,
  "name": "Bobby",
  "age": 35,
  "hobbies": [{
    "id": 2,
    "name": "hiking"
  }, {
    "id": 4,
    "name": "online gaming"
  }]
}];
const filteredPeople = people.filter(person => {
  const hasHikingHobby = person.hobbies.some(hobby => hobby.id === 2);
  return hasHikingHobby;
});
alert(filteredPeople.length);

Answer 6

Here's a potential solution for your issue:

const people = [{
  "id": 111222,
  "name": "Faye",
  "age": 27,
  "hobbies": [{
    "id": 2,
    "name": "hiking"
  }, {
    "id": 3,
    "name": "eating"
  }]
}, {
  "id": 223456789001,
  "name": "Bobby",
  "age": 35,
  "hobbies": [{
    "id": 2,
    "name": "hiking"
  }, {
    "id": 4,
    "name": "online gaming"
  }]
}];
const filteredPeople = people.filter(person => {
  const hasHikingHobby = person.hobbies.some(hobby => hobby.id === 2);
  return hasHikingHobby;
});
alert(filteredPeople.length);

Retrieving object by a value within a nested array in Javascript

Answer №1

Answer №2

Answer №3

Similar questions

TextView influenced by Res/Arrays

Ways to extract the maximum value from a dataset formatted in JSON

Even though I included a key prop for each item, I am still encountering the error message stating that every child in a list should have a distinct "key" prop

Decoding Multiple JSON Links

Guidelines for leveraging AngularJS Decorators to deactivate a button within an Html document

List of coordinates extracted from PolylineMeasure plugin in the React Leaflet library

Avoid interrupting the code execution until it has finished completely

What distinctions can be observed between interacting with the Jira Rest API manually compared to through programming?

Steps for showcasing a automated slideshow

Adding a total property at the row level in JavaScript

switch between showing and hiding dynamic table rows

Transition smoothly between sections using fullPage.js with clipping path effects

Calculating totals in real-time with JavaScript for a dynamic PHP and HTML form that includes quantity,

Swap out all hyperlinks on the webpage with a different URL

Acquiring HTML form data using JavaScript

Looping through items using ng-repeat according to the chosen option in a select dropdown

Discover the method for tracking idle time with jQuery and PHP

The compiler option 'esnext.array' does not provide support for utilizing the Array.prototype.flat() method

Tips for customizing the `src/app/layout.tsx` file in Next.js 13

Is there a way to toggle a single Reactstrap Collapse component?