Retrieve a specific value nested within an array that is contained within an array of objects

Question

Retrieve a specific value nested within an array that is contained within an array of objects

//Organizing data
const resources = {
  categories: [
    { name: 'Category X', items: [ { id: 0, title: 'Item X'} ] },
    { name: 'Category Y', items: [ { id: 1, title: 'Item Y'} ] },
  ]
};

//Fetching the item    
const itemId = 1;
const category = resources.categories.find(c => c.items.find(i => i.id === itemId));
const item = category.items.find(i => i.id === itemId);

//Displaying the result    
console.log(item);

While the above implementation is functional, I believe there could be a more efficient approach to retrieving an object from an array, especially when needing to repeat the code multiple times...

javascript arrays

Answer 1

Answer №1

One way to achieve this is by using the Array.forEach method along with Array.find

//Lets create a structure
const data = {
  categories: [
    { name: 'Category A', items: [ { id: 0, label: 'item A' } ] },
    { name: 'Category B', items: [ { id: 1, label: 'item B' } ] },
  ]
};

//Search for a specific item  
const id = 1;
let item;
data.categories.forEach(category => {
  item = category.items.find(i => i.id === id);
});

//Display the result   
console.log(item);

Answer 2

One way to achieve this is by using the Array.forEach method along with Array.find

//Lets create a structure
const data = {
  categories: [
    { name: 'Category A', items: [ { id: 0, label: 'item A' } ] },
    { name: 'Category B', items: [ { id: 1, label: 'item B' } ] },
  ]
};

//Search for a specific item  
const id = 1;
let item;
data.categories.forEach(category => {
  item = category.items.find(i => i.id === id);
});

//Display the result   
console.log(item);

Answer 3

Answer №2

To search for a specific value within an object, you can implement a recursive function that traverses through the object's properties.

function searchForObject(obj, prop, val) {
    var result;
    
    if (obj[prop] === val) {
        return obj;
    }
    if (obj && typeof obj === 'object') {
        Object.values(obj).some(o => result = searchForObject(o, prop, val));
    }
    return result;
}

var data = { items: [{ name: 'Item A', value: 100 }, { name: 'Item B', value: 200 }] };

console.log(searchForObject(data, 'value', 100));
console.log(searchForObject(data, 'name', 'Item B'));

Answer 4

To search for a specific value within an object, you can implement a recursive function that traverses through the object's properties.

function searchForObject(obj, prop, val) {
    var result;
    
    if (obj[prop] === val) {
        return obj;
    }
    if (obj && typeof obj === 'object') {
        Object.values(obj).some(o => result = searchForObject(o, prop, val));
    }
    return result;
}

var data = { items: [{ name: 'Item A', value: 100 }, { name: 'Item B', value: 200 }] };

console.log(searchForObject(data, 'value', 100));
console.log(searchForObject(data, 'name', 'Item B'));

Answer 5

Answer №3

There seems to be an error in your code at

const sectionDef = definitions.find

, it should be corrected to

const sectionDef = definitions.sections.find

since find method only works with arrays. Your current approach is good and will help you achieve the desired outcome.

const definitions = {
  sections: [
    { title: 'Section A', actions: [ { id: 0, name: 'action A' } ] },
    { title: 'Section B', actions: [ { id: 1, name: 'action B' } ] },
  ]
}

const id = 1;
const sectionDef = definitions.sections.find(s => s.actions.find(a => a.id === id));
const actionDef = sectionDef.actions.find(a => a.id === id);

console.log(sectionDef);
console.log(actionDef);

Answer 6

There seems to be an error in your code at

const sectionDef = definitions.find

, it should be corrected to

const sectionDef = definitions.sections.find

since find method only works with arrays. Your current approach is good and will help you achieve the desired outcome.

const definitions = {
  sections: [
    { title: 'Section A', actions: [ { id: 0, name: 'action A' } ] },
    { title: 'Section B', actions: [ { id: 1, name: 'action B' } ] },
  ]
}

const id = 1;
const sectionDef = definitions.sections.find(s => s.actions.find(a => a.id === id));
const actionDef = sectionDef.actions.find(a => a.id === id);

console.log(sectionDef);
console.log(actionDef);

Answer 7

Answer №4

const sections = {
  parts: [
    { area: 'Part X', tasks: [ { id: 0, name: 'task X' } ] },
    { area: 'Part Y', tasks: [ { id: 1, name: 'task Y' } ] },
  ]
}
const id = 1;
var result2;
var data = sections.parts;
var result = data.filter(function(obj) {
    var data2 = obj.tasks;
    result2 = data2.filter(function(obj) {
        return obj.id == id;
    });
});
console.log(result2);

Answer 8

const sections = {
  parts: [
    { area: 'Part X', tasks: [ { id: 0, name: 'task X' } ] },
    { area: 'Part Y', tasks: [ { id: 1, name: 'task Y' } ] },
  ]
}
const id = 1;
var result2;
var data = sections.parts;
var result = data.filter(function(obj) {
    var data2 = obj.tasks;
    result2 = data2.filter(function(obj) {
        return obj.id == id;
    });
});
console.log(result2);

Retrieve a specific value nested within an array that is contained within an array of objects

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

As I iterated over the Vehicles API data, I encountered an issue while trying to access specific Vehicle information. I received an error message stating "Cannot read property 'id' of undefined

Working with JSON data retrieved from a PHP and MySQL backend in an AngularJS application

Ways to automatically change a URL into a clickable link upon pasting

Connecting elements within an object using VueJs

Defining global 'require' scripts in Node.js

Store the selected checkbox values in an array when submitting in Ionic

Error: The function $(...).draggable is not recognized" and "Error: The object $.browser is not defined

What is causing the bullets for the unordered list to appear before the items are inserted into the list?

Ways to retrieve information from a different website's URL?

Utilizing jQuery to dynamically add classes

What is the best way to implement validation for a textfield to prevent submission if a negative value is entered?

Troubleshooting a misformatted JSON string that lacks proper double quotes in Java Script

Exploring the capabilities of Angular and UIGrid for fetching table information

How can union types be used correctly in a generic functional component when type 'U' is not assignable to type 'T'?

Display data from a PHP array in a JavaScript alert box

Storing the usernames of users through local storage is essential for data preservation

What is the best way to dynamically set the 'selected' attribute in HTML dropdown options using AngularJS data?

How can a JavaScript function be imported into a React component from a location outside the src folder?

How can I easily swap between the front and back cameras while using an app?

Utilizing the Bootstrap 5 Alpha validation script within a React environment