Exploring the power of ES6: Breaking down an array filled with objects

Question

Exploring the power of ES6: Breaking down an array filled with objects

So I have this object:

const settings = {
    js: {
        files: [
            {
                src: './js/app.js',
                name: 'script.js',
                dest: 'public_html/js/'
            },
            {
                src: './js/admin.js',
                name: 'script.js',
                dest: 'public_html/js/'
            }
        ]
    }
};

and I'd like to extract all the sources. Something like this:

sources = ['./js/app.js', './js/admin.js']

// or, at least
sources = [{'./js/app.js'}]

I know how to achieve this with a loop, but can I use ES6 destructuring instead?

Maybe something along these lines:

{sources = [{src}]} = config.js;

OR even:

{[{src}] : sources} = config.js;

javascript arrays object ecmascript-6

Answer 1

Answer №1

Utilizing the map() function is more suitable for this scenario rather than using destructuring.

const data = {
    movies: [
        {
            title: 'Inception',
            genre: 'Sci-Fi',
            releaseDate: '2010'
        },
        {
            title: 'The Dark Knight',
            genre: 'Action',
            releaseDate: '2008'
        }
    ]
};

console.log(data.movies.map(item => item.title));

Answer 2

Utilizing the map() function is more suitable for this scenario rather than using destructuring.

const data = {
    movies: [
        {
            title: 'Inception',
            genre: 'Sci-Fi',
            releaseDate: '2010'
        },
        {
            title: 'The Dark Knight',
            genre: 'Action',
            releaseDate: '2008'
        }
    ]
};

console.log(data.movies.map(item => item.title));

Answer 3

Answer №2

To easily extract data using an iterator, consider implementing destructuring along with Array#entries and a for ... of statement. It involves utilizing a temporary variable named index.

var config = { js: { files: [{ src: './js/app.js', name: 'script.js', dest: 'public_html/js/' }, { src: './js/admin.js', name: 'script.js', dest: 'public_html/js/' }] } },
    index,
    result = [];

for ({ 0: index, 1: { src: result[index] } } of config.js.files.entries());

console.log(result)

Answer 4

To easily extract data using an iterator, consider implementing destructuring along with Array#entries and a for ... of statement. It involves utilizing a temporary variable named index.

var config = { js: { files: [{ src: './js/app.js', name: 'script.js', dest: 'public_html/js/' }, { src: './js/admin.js', name: 'script.js', dest: 'public_html/js/' }] } },
    index,
    result = [];

for ({ 0: index, 1: { src: result[index] } } of config.js.files.entries());

console.log(result)

Answer 5

Answer №3

If you're dealing with an array like this, destructuring without a loop or map isn't feasible.

One way to go about it is by employing destructuring in a for-of loop to navigate through the files:

let sources = [];
for (let {src} of data.js.files) {
  sources.push(src);
}

Alternatively, you could opt for a more efficient method using array functions:

// utilizing map
let sources = data.js.files.map(file => file.src);

// or via reduce
let sources = data.js.files.reduce((result, file) => result.concat(file.src), []);

Answer 6

If you're dealing with an array like this, destructuring without a loop or map isn't feasible.

One way to go about it is by employing destructuring in a for-of loop to navigate through the files:

let sources = [];
for (let {src} of data.js.files) {
  sources.push(src);
}

Alternatively, you could opt for a more efficient method using array functions:

// utilizing map
let sources = data.js.files.map(file => file.src);

// or via reduce
let sources = data.js.files.reduce((result, file) => result.concat(file.src), []);

Answer 7

Answer №4

Implement the Array.map() method in JavaScript.

DEMO

const data = {
    users: [
            {
                name: 'Alice',
                age: 25
            },
            {
                name: 'Bob',
                age: 30
            }
        ]
};

var names = data.users.map(function(user) {
  return user.name;
});

console.log(names);

Answer 8

Implement the Array.map() method in JavaScript.

DEMO

const data = {
    users: [
            {
                name: 'Alice',
                age: 25
            },
            {
                name: 'Bob',
                age: 30
            }
        ]
};

var names = data.users.map(function(user) {
  return user.name;
});

console.log(names);

Exploring the power of ES6: Breaking down an array filled with objects

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Perform an Ajax request to retrieve and update Django template with fresh JSON data

How can multiple buttons be added to each row in Jquery datatables and how can events be applied to them?

JavaScript and the proper way to format the weekdays

Encountering difficulty extracting information from an XML document within the Parse Cloud utilizing the XMLReader in an Express application

Vue.js component communication issue causing rendering problems

Adding nested arrays in MongoDB using Java can greatly improve the structure and organization of

Tips for utilizing ng-repeat with a function that generates a fresh object?

I require the ability to generate a fresh JSON file using Node.js

What is the best way to make the current year the default selection in my Select control within Reactive Forms?

Security Vulnerability in Ajax Callback Breakpoints

What is the best approach to iterate through multiple input fields while maintaining separate states for each one?

Tips for inserting values into an array in NodeJS

Launching a Node.js script with pm2 and implementing a delay

Utilize Javascript to Populate Form Fields Based on "Selected Name"

Is it possible to create a system in NextJS that utilizes either the path or the query parameter?

Utilizing React Native to seamlessly integrate one JavaScript function into another

When the ajax.beginform is successful, no action is required

When Protractor is utilized and a button is clicked triggering an http request, an error is encountered while awaiting synchronization with Protractor

Learn how to perform a post request in node js without triggering a page redirect or refreshing the form, all without using the preventdefault method

What is the best way to extract value from an innerHTML object?