Retrieving data from a nested array within an array of objects using JavaScript

Question

Retrieving data from a nested array within an array of objects using JavaScript

Below is an example of an array object:

const data =  [
    {
      name: "A",
      values: [
        {
          name: "PASS",
          value: 36,
        },
      ],
    },
    {
      name: "B",
      values: [
        {
          name: "PASS",
          value: 144,
        },
      ],
    },
    {
      name: "C",
      values: [
        {
          name: "PASS",
          value: 144,
        },
                {
          name: "FAIL",
          value: 256,
        },
      ],
    }]

I want to filter out the PASS objects from this data and create a new object with simplified structure as shown below:

[
 {
   name: "A",
   value: 36,
 },
 {
   name: "B",
   value: 144,
 },
 {
   name: "C",
   value: 144,
 }
]

I attempted to achieve this using the code snippet below but encountered issues:

sorted_obj = {}
data.map(item => {
item.values.map(registry => {
  if(registry.name === 'PASS'){
    sorted_obj.push({item.name:registry.name.value})
  }
})
})

Please advise on how I can correct my approach or suggest a better solution. Thank you for your assistance.

javascript arrays object

Answer 1

Answer №1

Employing the use of Array.flatMap() is an effective way to iterate through the data array. By implementing a filter on the values, we can selectively include only the items with "PASS" in their name. Subsequently, we should map these passed items while utilizing the name attribute from the parent object:

const data = [{"name":"A","values":[{"name":"PASS","value":36}]},{"name":"B","values":[{"name":"PASS","value":144}]},{"name":"C","values":[{"name":"PASS","value":144},{"name":"FAIL","value":256}]}]

const result = data.flatMap(o => 
  o.values.filter(v => v.name === 'PASS')
  .map(v => ({ 
    name: o.name,
    value: v.value,
  }))
)

console.log(result)

Answer 2

Employing the use of Array.flatMap() is an effective way to iterate through the data array. By implementing a filter on the values, we can selectively include only the items with "PASS" in their name. Subsequently, we should map these passed items while utilizing the name attribute from the parent object:

const data = [{"name":"A","values":[{"name":"PASS","value":36}]},{"name":"B","values":[{"name":"PASS","value":144}]},{"name":"C","values":[{"name":"PASS","value":144},{"name":"FAIL","value":256}]}]

const result = data.flatMap(o => 
  o.values.filter(v => v.name === 'PASS')
  .map(v => ({ 
    name: o.name,
    value: v.value,
  }))
)

console.log(result)

Answer 3

Answer №2

const info = [
    {
      color: "Red",
      values: [
        {
          type: "Large",
          quantity: 10,
        },
      ],
    },
    {
      color: "Blue",
      values: [
        {
          type: "Medium",
          quantity: 20,
        },
      ],
    },
    {
      color: "Green",
      values: [
        {
          type: "Small",
          quantity: 5,
        },
        {
          type: "Medium",
          quantity: 15,
        },
      ],
    }
];
    
const sorted_items = [];
info.map(item => {
  item.values.map(entry => {
    if(entry.type === 'Medium'){
      sorted_items.push({color: item.color, quantity: entry.quantity})
    }
  });
});
console.log(sorted_items);

Answer 4

const info = [
    {
      color: "Red",
      values: [
        {
          type: "Large",
          quantity: 10,
        },
      ],
    },
    {
      color: "Blue",
      values: [
        {
          type: "Medium",
          quantity: 20,
        },
      ],
    },
    {
      color: "Green",
      values: [
        {
          type: "Small",
          quantity: 5,
        },
        {
          type: "Medium",
          quantity: 15,
        },
      ],
    }
];
    
const sorted_items = [];
info.map(item => {
  item.values.map(entry => {
    if(entry.type === 'Medium'){
      sorted_items.push({color: item.color, quantity: entry.quantity})
    }
  });
});
console.log(sorted_items);

Answer 5

Answer №3

Simply use a for...of loop along with object destructuring to achieve this task.

const data=[{name:"A",values:[{name:"PASS",value:36}]},{name:"B",values:[{name:"PASS",value:144}]},{name:"C",values:[{name:"PASS",value:144},{name:"FAIL",value:256}]}];

const out = [];

// Iterate through each object in the data array and extract
// the name and values properties
for (let { name, values } of data) {

  // Retrieve the value from the object within values that has a name of PASS
  const value = values.find(({ name }) => name === 'PASS').value;

  // Add a new object with these properties to the output array
  out.push({ name, value });
}

console.log(out);

Answer 6

Simply use a for...of loop along with object destructuring to achieve this task.

const data=[{name:"A",values:[{name:"PASS",value:36}]},{name:"B",values:[{name:"PASS",value:144}]},{name:"C",values:[{name:"PASS",value:144},{name:"FAIL",value:256}]}];

const out = [];

// Iterate through each object in the data array and extract
// the name and values properties
for (let { name, values } of data) {

  // Retrieve the value from the object within values that has a name of PASS
  const value = values.find(({ name }) => name === 'PASS').value;

  // Add a new object with these properties to the output array
  out.push({ name, value });
}

console.log(out);

Answer 7

Answer №4

This is how I like to approach things - straightforward, concise, and efficient.

const info = [{"name":"X","values":[{"name":"YES","value":21}]},{"name":"Y","values":[{"name":"TRUE","value":98}]},{"name":"Z","values":[{"name":"YES","value":56},{"name":"NO","value":77}]}]

const outcomes = info.map((results)=>({name: results.name, value: results.values.find(entry => entry.name === 'YES').value}))

console.log(outcomes)

Answer 8

This is how I like to approach things - straightforward, concise, and efficient.

const info = [{"name":"X","values":[{"name":"YES","value":21}]},{"name":"Y","values":[{"name":"TRUE","value":98}]},{"name":"Z","values":[{"name":"YES","value":56},{"name":"NO","value":77}]}]

const outcomes = info.map((results)=>({name: results.name, value: results.values.find(entry => entry.name === 'YES').value}))

console.log(outcomes)

Answer 9

Answer №5

For improved performance considerations, my choice would be to utilize Array.prototype.reduce() over Array.prototype.flatMap(). Here is an example:

const src = [{name:"A",values:[{name:"PASS",value:36}]},{name:"B",values:[{name:"PASS",value:144}]},{name:"C",values:[{name:"PASS",value:144},{name:"FAIL",value:256}]}]
    
const result = src.reduce((acc, {name, values}) => {
  const pass = values
    .filter(({name:_name}) => _name === 'PASS')
    .map(({value}) => ({name, value}))
  acc.push(...pass)
  return acc
}, [])    

console.log(result)

.as-console-wrapper {min-height:100%;}

Answer 10

For improved performance considerations, my choice would be to utilize Array.prototype.reduce() over Array.prototype.flatMap(). Here is an example:

const src = [{name:"A",values:[{name:"PASS",value:36}]},{name:"B",values:[{name:"PASS",value:144}]},{name:"C",values:[{name:"PASS",value:144},{name:"FAIL",value:256}]}]
    
const result = src.reduce((acc, {name, values}) => {
  const pass = values
    .filter(({name:_name}) => _name === 'PASS')
    .map(({value}) => ({name, value}))
  acc.push(...pass)
  return acc
}, [])    

console.log(result)

.as-console-wrapper {min-height:100%;}

Answer 11

Answer №6

This method begins by extracting the values and then flattening them to form a unified list of all values. Subsequently, this list can be refined using the Array.filter technique.

Map: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Filter: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Reduce: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

const data =  [
    {
      name: "A",
      values: [
        {
          name: "PASS",
          value: 36,
        },
      ],
    },
    {
      name: "B",
      values: [
        {
          name: "PASS",
          value: 144,
        },
      ],
    },
    {
      name: "C",
      values: [
        {
          name: "PASS",
          value: 144,
        },
                {
          name: "FAIL",
          value: 256,
        },
      ],
    }];
    
    const allNestedValues = data
    .map(obj => obj.values.map(value => ({...value, objName: obj.name}))) //extract the nested values
    .reduce((acc, curr) => [...acc, ...curr], []); //create a flattened list of values
    
    const passingNestedValues = allNestedValues
    .filter(value => value.name === 'PASS') //filter to allow just PASS
    .map(value => ({name:value.objName, value:value.value}))//extract desired properties
    console.log(passingNestedValues);

Answer 12

This method begins by extracting the values and then flattening them to form a unified list of all values. Subsequently, this list can be refined using the Array.filter technique.

Map: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Filter: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Reduce: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

const data =  [
    {
      name: "A",
      values: [
        {
          name: "PASS",
          value: 36,
        },
      ],
    },
    {
      name: "B",
      values: [
        {
          name: "PASS",
          value: 144,
        },
      ],
    },
    {
      name: "C",
      values: [
        {
          name: "PASS",
          value: 144,
        },
                {
          name: "FAIL",
          value: 256,
        },
      ],
    }];
    
    const allNestedValues = data
    .map(obj => obj.values.map(value => ({...value, objName: obj.name}))) //extract the nested values
    .reduce((acc, curr) => [...acc, ...curr], []); //create a flattened list of values
    
    const passingNestedValues = allNestedValues
    .filter(value => value.name === 'PASS') //filter to allow just PASS
    .map(value => ({name:value.objName, value:value.value}))//extract desired properties
    console.log(passingNestedValues);

Retrieving data from a nested array within an array of objects using JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

The angular variable is being updated, but the tweet embed code surrounding it is not being refreshed

Supabase's newly uploaded audio blobs are experiencing difficulties when it comes to

There was a failure to retrieve any data when trying to send an ajax request to

Issue Encountered with FabricJS: Unable to Execute 'drawImage' with Image Subclass

I am experiencing issues with staying logged in while using Passport and sessions. The function "isAuthenticated()" from Passport continuously returns false, causing me to not remain logged in

"Enhance your HTML table by selecting and copying cell values with a simple click and CTRL +

Is it possible to use jQuery's .attr method to change the href attribute if a certain text is contained within a DIV

Sending postMessage during the beforeunload event does not work as expected

Trouble arises when rendering nested components in React Router 4

Ways to modify the color of a container's border by interacting with radio buttons through JavaScript

The length of the HTTP response in Angular is not defined

How can HTML and CSS be linked to display images independently?

Tips for triggering a function when the range slider is adjusted

Having trouble determining why the design is not displaying correctly

Patiently waiting for the component variable to be assigned through subscription

Encountering difficulties setting cookies within the app router in Next.js

Guide on building a multi-page application using Vue or React

Issues with Node JS app's handling of php mailer code

How to display nested arrays in AngularJs

Transitioning from a multipage application to Piral: A comprehensive guide