Extract list of values from an array of objects to an array based on a key in JavaScript.

There may be a situation where you want to extract the list of values of a specific key from an objects to an array. 



Method 1:

In one way, we can use both for loop and Array.push() method and achieve it. 

For example, we have an Array of objects as below

let studentsObject = [
    {
        "name": "John",
        "age": 26
    },
    {
        "name": "Helen",
        "age": 42
    },
    {
        "name": "Cole",
        "age": 54
    },
    {
        "name": "Noah",
        "age": 38
    }
]

we can extract the values as shown below 

let namesList;
studentsObject.forEach(student => {
    namesList.push(student.name)
});
console.log(namesList);

//Output
['John', 'Helen', 'Cole', 'Noah']

Method 2:

The simple and easy way is using map function as below

let namesList = studentsObject.map(student => student.name);
console.log(namesList);

//Output
['John', 'Helen', 'Cole', 'Noah']

Here we've to assign the map function to a variable. If we don't assign to a variable, then the whole array object will be printed as it is.

Comments

Post a Comment

Popular posts from this blog

Avoiding multiple API calls in Angular by using shareReplay method of RxJS

Image
While working with some Angular projects, we've to subscribe the same api in to different methods in a component. In order to avoid that we can use shareReplay method of RxJS. Lets consider an app which has two buttons and two different methods gets called on clicking on those buttons. But, internally the two methods will subscribe the same api two times. Suppose user clicks the button multiple times, then we've to call the same api multiple times to display the number of completed/incomplete tasks. On clicking the `Completed Todos` and `Incomplete Todos` buttons, same API got two times. This will increase the load on server and increase the loading time of UI. Henceforth, reduces the performance of our application. We can avoid calling multiple API services with the help of shareReplay method of RxJS. shareReplay  subscribes the observable, caches the response and multicasts it to all the subscribers without calling the API multiple times. Lets see the above example with share...
Read more

How to automate running of Apache and MySQL in XAMPP

Image
1. Open notepad and enter the below commands @ echo off start C:\xampp\xampp-control.exe 2. Save as .bat file 3. Open your XAMPP application, click on 'config' button. 4. Check the check boxes of required servers. 5. Click on save. 6. Go to the location, where the batch file is saved and open the .bat (you can double click on it). That will open XAMPP application and run the chosen servers.
Read more

Add key-value pair to every object in array of objects in JavaScript

Image
Sometimes, we've to add flag or some new key-value pair to every object in array of objects. For that we can follow three ways to achieve it. For suppose, we have an array of objects as below and we want to add gender key to all the objects     students  = [     {        name:   'Radhika' ,        age:   26 ,     },     {        name:   'Radha' ,        age:   24 ,     },     {        name:   'Jyothi' ,        age:   25 ,     },   ]; // Expected Output    students  = [     {        name:   'Radhika' ,        age:   ...
Read more