How can an array be generated functionally using properties from an array of objects?

Question

How can an array be generated functionally using properties from an array of objects?

Here's the current implementation that is functioning as expected:

        let newList: any[] = [];

        for (let stuff of this.Stuff) {
            newList = newList.concat(stuff.food);
        }

The "Stuff" array consists of objects where each object contains a property named "food" which is also an object. The goal is to iterate through this array and compile a new array containing all instances of the "food" objects.

Although my existing solution works fine, I'm curious if there's an alternative approach that doesn't involve using a traditional for loop.

Cheers.

javascript typescript functional-programming

Answer 1

Answer №1

If you're searching for the ideal method to manipulate an array in JavaScript, look no further than the map function:

const newList = this.Stuff.map(stuff => stuff.food);

Avoid repeatedly reassigning variables and opt for a more functional approach. Instead of using concat multiple times, consider utilizing push within a for…of loop for better efficiency. However, the map method remains simpler and superior.

Answer 2

If you're searching for the ideal method to manipulate an array in JavaScript, look no further than the map function:

const newList = this.Stuff.map(stuff => stuff.food);

Avoid repeatedly reassigning variables and opt for a more functional approach. Instead of using concat multiple times, consider utilizing push within a for…of loop for better efficiency. However, the map method remains simpler and superior.

Answer 3

Answer №2

Here is another option to consider by utilizing the reduce method

var arr = [[1,2,3],[4,5,6],[7,8,9]];
var output = arr.reduce( function ( prev, curr ){ return prev.concat( curr ) } );
console.log(output);

Answer 4

Here is another option to consider by utilizing the reduce method

var arr = [[1,2,3],[4,5,6],[7,8,9]];
var output = arr.reduce( function ( prev, curr ){ return prev.concat( curr ) } );
console.log(output);

Answer 5

Answer №3

One way to elegantly convey this is by utilizing a functional primitive

const getProperty = key => obj => obj[key];

const foodList = this.Stuff.map(getProperty('food'));

Answer 6

One way to elegantly convey this is by utilizing a functional primitive

const getProperty = key => obj => obj[key];

const foodList = this.Stuff.map(getProperty('food'));

How can an array be generated functionally using properties from an array of objects?

Answer №1

Answer №2

Answer №3

Similar questions

Retrieving the necessary data from my object to perform a sum calculation in angular

Angular2: The '@Component' decorator does not contain a 'directives' property in its configuration object

Utilizing GeoLocation in JavaScript: Implementing a Wait for $.ajax Response

Issue encountered while attempting to upload a document in Angular due to Content-Disposition

The JQuery script functions properly when directly embedded in an HTML file, but fails to work when linked from an external file

What is the method to retrieve Response Headers in cases of an empty response?

How to Use jQuery in Thymeleaf to Toggle All Checkboxes

What are the steps to modify data within the root component?

Passing variables in Redirect() without exposing them in the URL; a methodical approach

Instructions on how to make a radio button selected when clicked are as follows:

React - Utilizing Secondary Prop Value in Material UI Node Components

To determine if two constant objects share identical structures in TypeScript, you can compare their properties

Creating a report file based on Typescript type checking results

What methods can be used to secure Next.js API routes and prevent them from being directly accessed through the URL

Encountering an issue with ReactJS + Redux where the error message states: "Error in prop type: The Right-hand side of 'instanceof' cannot be called"

Enter the text within the TypeScript file where the cursor is positioned

Pressing the button will activate the Ctrl+z and Ctrl+y key commands

Command to update a document in AWS DynamoDB using the Document Client

Ways to evaluate two sentences based solely on the spacing in their dynamic sections

How to transform an image into a base64 string using Vue