Obtain an array containing only one property value from an array of objects

Question

Obtain an array containing only one property value from an array of objects

Within my array of objects, I am looking to extract all the controls and move them to a new array:

this.formModel = {
    sections: [
        {
            title: 'Section 01',
            controls: [
                new FormControlInput({
                    key: 'name 01',
                    label: 'Name 01'
                }),
                new FormControlSelect({
                    key: 'abc',
                    label: 'Abc'
                })
            ]
        },
        {
            title: 'Section 02',
            controls: [
                new FormControlInput({
                    key: 'name 02',
                    label: 'Name 02'
                })
            ]
        }
    ]
};

Although I am attempting to achieve this using map, the result is an array of arrays rather than a single array:

this.formModel.sections.map(function (x) { return x.controls; })

Current output:

[
     {
        [{
            key: 'name 01',
            label: 'Name 01'
        },
        {
            key: 'abc',
            label: 'Abc'
        }]
     },
     {
        [{
            key: 'name 02',
            label: 'Name 02'
        }]
     }
]

What I am aiming for is:

[
    {
        key: 'name 01',
        label: 'Name 01'
    },
    {
        key: 'abc',
        label: 'Abc'
    },
    {
        key: 'name 02',
        label: 'Name 02'
    }       
]

javascript angular typescript

Answer 1

Answer №1

Simply flatten your array after using the map function:

var example = {
  groups: [{
      title: 'Group 01',
      items: [
        { key: 'item 01', label: 'Item 01' },
        { key: 'abc', label: 'Abc' }
      ]
    }, {
      title: 'Group 02',
      items: [
        { key: 'item 02', label: 'Item 02' }
      ]
    }
  ]
};

var mapped = example.groups.map(function (x) { return x.items; });
var flattened = [].concat.apply([], mapped);
console.log(flattened);

To simplify the example:

// Here is the structure:
var groups= [{
      items: [{}, {}] // I1
    }, {
      items: [{}]     // I2
    }
];

// Using map to extract each `items` property and create an array entry for each:
var mapped = groups.map(function (x) { return x.items; });
console.log(mapped);
// [[{},{}],[{}]]
//  ^ I1    ^ I2

// Removing the extra layer of arrays:
var flattened = [].concat.apply([], mapped);
console.log(flattened);

Answer 2

Simply flatten your array after using the map function:

var example = {
  groups: [{
      title: 'Group 01',
      items: [
        { key: 'item 01', label: 'Item 01' },
        { key: 'abc', label: 'Abc' }
      ]
    }, {
      title: 'Group 02',
      items: [
        { key: 'item 02', label: 'Item 02' }
      ]
    }
  ]
};

var mapped = example.groups.map(function (x) { return x.items; });
var flattened = [].concat.apply([], mapped);
console.log(flattened);

To simplify the example:

// Here is the structure:
var groups= [{
      items: [{}, {}] // I1
    }, {
      items: [{}]     // I2
    }
];

// Using map to extract each `items` property and create an array entry for each:
var mapped = groups.map(function (x) { return x.items; });
console.log(mapped);
// [[{},{}],[{}]]
//  ^ I1    ^ I2

// Removing the extra layer of arrays:
var flattened = [].concat.apply([], mapped);
console.log(flattened);

Answer 3

Answer №2

To simplify the structure, employ the `reduce` function

formModel.categories
  .map(item =>  item.items)
  .reduce((previous, current) => previous.concat(current), [])

Answer 4

To simplify the structure, employ the `reduce` function

formModel.categories
  .map(item =>  item.items)
  .reduce((previous, current) => previous.concat(current), [])

Answer 5

Answer №3

Replace map with reduce:

let formData = {
    sections: [
        {
            title: 'Section 01',
            controls: [
                {
                    key: 'name 01',
                    label: 'Name 01'
                },
                {
                    key: 'abc',
                    label: 'Abc'
                }
            ]
        },
        {
            title: 'Section 02',
            controls: [
                {
                    key: 'name 02',
                    label: 'Name 02'
                }
            ]
        }
    ]
};

let finalResult = formData.sections.reduce((finalRes, section) => {
return finalRes = finalRes.concat(section.controls); 
}, []);

console.log(finalResult);

Answer 6

Replace map with reduce:

let formData = {
    sections: [
        {
            title: 'Section 01',
            controls: [
                {
                    key: 'name 01',
                    label: 'Name 01'
                },
                {
                    key: 'abc',
                    label: 'Abc'
                }
            ]
        },
        {
            title: 'Section 02',
            controls: [
                {
                    key: 'name 02',
                    label: 'Name 02'
                }
            ]
        }
    ]
};

let finalResult = formData.sections.reduce((finalRes, section) => {
return finalRes = finalRes.concat(section.controls); 
}, []);

console.log(finalResult);

Obtain an array containing only one property value from an array of objects

Answer №1

Answer №2

Answer №3

Similar questions

Having trouble retrieving JSON data from the open weather API

Verify whether an option is chosen in CakePHP 3 form

The loading bar animation doesn't begin at a blank slate

Sending form submission data with useFormik via React Router's Link component is a common task in web development. By

Is it possible to dynamically change the color of a box shadow using an event handler?

The logs of both the frontend and backend display an array of numbers, but surprisingly, this data is not stored in the database

Error encountered when trying to send form data through an AJAX request

The mystery of why gulp-watch fails to remove files

Managing Visual Studio Code Extension Intellisense: A Guide

Method for extracting URL parameters while utilizing a hash within the URL

The execution of async.each does not complete successfully

Display Angular elements within dynamically injected HTML

Implementing Angular Universal on Azure Platform

Error: An unexpected symbol '<' was encountered after the build process in Vue.js

Use Python to fetch a file from a webpage without having to actually open the webpage

Error with React Query Mutation and TypeScript: The argument '{ surgeryID: any; stageTitle: any; }' cannot be assigned to a parameter of type 'void'

Error message: Unforeseen node express token problem

What is the best way to extract function bodies from a string with JavaScript?

Motion of the atoms

Check if the page has been loaded using Jquery