What is the best way to retrieve a specific value from a nested array that is within an array of objects

Question

What is the best way to retrieve a specific value from a nested array that is within an array of objects

My goal is to extract a specific field value from a nested array within an object array. Using the map method, I attempted to achieve this but ended up with two empty arrays nested inside two empty objects. Though I am aware of this mistake, it indicates the direction of my thought process.

function getChildArray(item, index) {
   var x = [item.hobbies]
      return x
}

console.log(parentArray.map(getChildArray))

Here is a glimpse of my document structure:

[  
   {  
      "id":12345678900,
      "name":"Jasmin",
      "age":27,
      "hobbies":[  
         {  
            "id":1221,
            "name":"hiking",
            "when":"anytime"
         },
         {  
            "id":9865,
            "name":"eating",
            "when":"all the time"
         }
      ]
   },
   {  
      "id":223456789001,
      "name":"Joe",
      "age":35,
      "hobbies":[  
         {  
            "id":989,
            "name":"gaming",
            "when":"anytime"
         },
         {  
            "id":2355,
            "name":"online gaming",
            "when":"all the time"
         }
      ]
   }
]

I am interested in knowing how I could retrieve a list of Joe's hobbies by name only.

javascript json multidimensional-array

Answer 1

Answer №1

const findJoe = parentArray.find(function (person) {
    return person.name === 'Joe';
});

if (findJoe) {
    const joesHobbies = findJoe.hobbies.map(function (hobby) {
       return hobby.name;
    });
}

Alternatively, in ES6 syntax:

const findJoe = parentArray.find((person) => person.name === 'Joe');

if (findJoe) {
    const joesHobbies = findJoe.hobbies.map((hobby) => hobby.name);
}

Answer 2

const findJoe = parentArray.find(function (person) {
    return person.name === 'Joe';
});

if (findJoe) {
    const joesHobbies = findJoe.hobbies.map(function (hobby) {
       return hobby.name;
    });
}

Alternatively, in ES6 syntax:

const findJoe = parentArray.find((person) => person.name === 'Joe');

if (findJoe) {
    const joesHobbies = findJoe.hobbies.map((hobby) => hobby.name);
}

Answer 3

Answer №2

Given that array.find is still unsupported in some browsers and you might not have a build tool in place, here's a straightforward ES5 solution. This approach utilizes filter and map:

var data = [{ id: 12345678900, name: 'Jasmin', age: 27, hobbies: [{'id': 1221, 'name': 'hiking', 'when': 'anytime'}, { 'id': 9865, 'name': 'eating', 'when': 'all the time' }] }, { id: 223456789001, name: 'Joe', age: 35, hobbies: [{'id': 989, 'name':
'gaming', 'when': 'anytime'}, { 'id': 2355, 'name': 'online gaming', 'when': 'all the time' }]}];

function getHobbiesByName(name) {
  return data.filter(function(person) {
    return (person.name == name);
  })[0].hobbies.map(function(hobby) {
    return hobby.name
  })
}

console.log(getHobbiesByName('Joe'))

Answer 4

Given that array.find is still unsupported in some browsers and you might not have a build tool in place, here's a straightforward ES5 solution. This approach utilizes filter and map:

var data = [{ id: 12345678900, name: 'Jasmin', age: 27, hobbies: [{'id': 1221, 'name': 'hiking', 'when': 'anytime'}, { 'id': 9865, 'name': 'eating', 'when': 'all the time' }] }, { id: 223456789001, name: 'Joe', age: 35, hobbies: [{'id': 989, 'name':
'gaming', 'when': 'anytime'}, { 'id': 2355, 'name': 'online gaming', 'when': 'all the time' }]}];

function getHobbiesByName(name) {
  return data.filter(function(person) {
    return (person.name == name);
  })[0].hobbies.map(function(hobby) {
    return hobby.name
  })
}

console.log(getHobbiesByName('Joe'))

Answer 5

Answer №3

Need a quick way to find an item based on a specific property and its value?

entries = [{id:3,type:'apple',colors:['red','green']},{id:4,type:'banana',colors:['yellow']}];

function getItem(prop,value){
 for(var j=0;j<entries.length;j++) if(entries[j][prop] == value) return entries[j];
 return {};
}

Let's test it out :

console.log(getItem('type','banana'));
console.log(getItem('type','banana').colors);

Answer 6

Need a quick way to find an item based on a specific property and its value?

entries = [{id:3,type:'apple',colors:['red','green']},{id:4,type:'banana',colors:['yellow']}];

function getItem(prop,value){
 for(var j=0;j<entries.length;j++) if(entries[j][prop] == value) return entries[j];
 return {};
}

Let's test it out :

console.log(getItem('type','banana'));
console.log(getItem('type','banana').colors);

What is the best way to retrieve a specific value from a nested array that is within an array of objects

Answer №1

Answer №2

Answer №3

Similar questions

The consistent failure of the 201 status node express API is causing major

Vue app hosted on Firebase displays a blank page when user logs in

What is the connection between serialization and JSON?

Tips for filtering only alpha versions, such as those labeled 1.0.0-alpha.*

Ways to retrieve HTML tags from a website's DOM and shadowDOM

Adjust positioning of navigation when hovered over

Utilizing Angular for making API requests using double quotes

Using jQuery .each() within a PHP foreach loop: A guide

Leveraging IE conditional comments for including CSS or JavaScript files can lead to an increase in the number of HTTP

Following the path of JavaScript function calls

RxJS emits an array of strings with a one second interval between each emission

How do I make the message "document.getElementById(...) is null" become true?

Obscure unidentified attribute within JSON error object

Challenges with Angular directive scopes

Looking for insights on reading and presenting XML files from a URL? Learn how to achieve this effortlessly with the power

How can I transform JSON data into MySQL INSERT and CREATE TABLE statements?

Navigating tables with jQuery using a loop and extracting data from two tables with matching row names

Applying double encoding to the JSON value

Remove JSON information with PHP When a button in an HTML table is clicked

When onSubmit is triggered, FormData is accessible. But when trying to pass it to the server action, it sometimes ends up as null