Generate a collection of elements using a different collection as a reference

Question

Generate a collection of elements using a different collection as a reference

I am struggling with an array of objects:

let data = [{
    createdDate: "2222",
    email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="087c6d7b7c3d487c6d7b7c266b6765">[email protected]</a>",
    histories: [],
    meta: {
      profilePic: "test"
    },
    name: {
      first: "Vikash",
      last: "Grv"
    },
    role: {
      id: "123",
      name: "test role 2"
    },
    specialities: [],
    status: "active",
    __v: 0,
    _id: "123"
  },
  {
    createdDate: "2222",
    email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a3d7c6d0d796e3d7c6d0d78dc0ccce">[email protected]</a>",
    histories: [],
    meta: {
      profilePic: "test"
    },
    name: {
      first: "Vikash",
      last: "Grv"
    },
    role: {
      id: "123",
      name: "test role 2"
    },
    specialities: [],
    status: "active",
    __v: 0,
    _id: "123"
  },
  {
    createdDate: "2222",
    email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="92e6f7e1e6a7d2e6f7e1e6bcf1fdff">[email protected]</a>",
    histories: [],
    meta: {
      profilePic: "test"
    },
    name: {
      first: "Vikash",
      last: "Grv"
    },
    role: {
      id: "123",
      name: "test role 2"
    },
    specialities: [],
    status: "active",
    __v: 0,
    _id: "123"
  },
]

Now, I aim to form another array of objects as follows:

const newData = [{
    teamMember: 'Vikas Grv',
    email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="86f2e3f5f2b3c6f2e3f5f2a8e5e9eb">[email protected]</a>',
    role: 'test role 2',
    assignedOn: null
  }, {
    teamMember: 'Vikas Grv',
    email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e195849295d4a195849295cf828e8c">[email protected]</a>',
    role: 'test role 2',
    assignedOn: null
  },
  {
    teamMember: 'Vikas Grv',
    email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b2c6d7c1c687f2c6d7c1c69cd1dddf">[email protected]</a>',
    role: 'test role 2',
    assignedOn: null
  }
]

The values in the team member field are a combination of the first and last names, emails stay the same, roles come from the key value 'name' under role, and assignedOn is set to null.

Any suggestions on how to achieve this transformation?

javascript arrays angular typescript object

Answer 1

Answer №1

If you want to utilize the `map` function:

var data = [{createdDate: "2222",email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="15617066612055617066613b767a78">[email protected]</a>",histories: [],meta: {profilePic: "test"},name: {first: "Vikash", last: "Grv"},role: {id: "123", name: "test role 2"},specialities: [],status: "active",__v: 0,_id: "123"}, {createdDate: "2222",email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="21554452551461554452550f424e4c">[email protected]</a>",histories: [],meta: {profilePic: "test"},name: {first: "Vikash", last: "Grv"},role: {id: "123", name: "test role 2"},specialities: [],status: "active",__v: 0,_id: "123"},{createdDate: "2222",email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="30445543440570445543441e535f5d">[email protected]</a>",histories: [],meta: {profilePic: "test"},name: {first: "Vikash", last: "Grv"},role: {id: "123", name: "test role 2"},specialities: [],status: "active",__v: 0,_id: "123"},];

var result = data.map(({name, role, email})=>({teamMember:Object.values(name).join(" "), email,role:role?.name, assignOn:null}));

console.log(result);

Answer 2

If you want to utilize the `map` function:

var data = [{createdDate: "2222",email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="15617066612055617066613b767a78">[email protected]</a>",histories: [],meta: {profilePic: "test"},name: {first: "Vikash", last: "Grv"},role: {id: "123", name: "test role 2"},specialities: [],status: "active",__v: 0,_id: "123"}, {createdDate: "2222",email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="21554452551461554452550f424e4c">[email protected]</a>",histories: [],meta: {profilePic: "test"},name: {first: "Vikash", last: "Grv"},role: {id: "123", name: "test role 2"},specialities: [],status: "active",__v: 0,_id: "123"},{createdDate: "2222",email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="30445543440570445543441e535f5d">[email protected]</a>",histories: [],meta: {profilePic: "test"},name: {first: "Vikash", last: "Grv"},role: {id: "123", name: "test role 2"},specialities: [],status: "active",__v: 0,_id: "123"},];

var result = data.map(({name, role, email})=>({teamMember:Object.values(name).join(" "), email,role:role?.name, assignOn:null}));

console.log(result);

Answer 3

Answer №2

Here is an example of how to achieve this:

import { Component } from '@angular/core';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  data = [
    {
      createdDate: "2222",
      email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83f7e6f0f7b6c3f7e6f0f7ade0ecee">[email protected]</a>",
      histories: [],
      meta: { profilePic: "test" },
      name: { first: "Vikash", last: "Grv" },
      role: { id: "123", name: "test role 2" },
      specialities: [],
      status: "active",
      __v: 0,
      _id: "123"
    },
    {
      createdDate: "3333",
      email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8cf8e9fff8bfccf8e9fff8a2efe3e1">[email protected]</a>",
      histories: [],
      meta: { profilePic: "test" },
      name: { first: "jhon", last: "doe" },
      role: { id: "123", name: "test role 3" },
      specialities: [],
      status: "active",
      __v: 0,
      _id: "1234"
    },
    {
      createdDate: "4444",
      email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="483c2d3b3c7d083c2d3b3c662b2725">[email protected]</a>",
      histories: [],
      meta: { profilePic: "test" },
      name: { first: "nathy", last: "gyr" },
      role: { id: "123", name: "test role 4" },
      specialities: [],
      status: "active",
      __v: 0,
      _id: "1234"
    },
  ]

  constructor() {

    let result = this.data.map((item) => {
      return {
        teamMember: item?.name?.first + item?.name?.last,
        email: item?.email,
        role: item?.role?.name,
        assignedOn: null
      }
    }

    );
    console.log(result)
  }

}

Answer 4

Here is an example of how to achieve this:

import { Component } from '@angular/core';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  data = [
    {
      createdDate: "2222",
      email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83f7e6f0f7b6c3f7e6f0f7ade0ecee">[email protected]</a>",
      histories: [],
      meta: { profilePic: "test" },
      name: { first: "Vikash", last: "Grv" },
      role: { id: "123", name: "test role 2" },
      specialities: [],
      status: "active",
      __v: 0,
      _id: "123"
    },
    {
      createdDate: "3333",
      email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8cf8e9fff8bfccf8e9fff8a2efe3e1">[email protected]</a>",
      histories: [],
      meta: { profilePic: "test" },
      name: { first: "jhon", last: "doe" },
      role: { id: "123", name: "test role 3" },
      specialities: [],
      status: "active",
      __v: 0,
      _id: "1234"
    },
    {
      createdDate: "4444",
      email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="483c2d3b3c7d083c2d3b3c662b2725">[email protected]</a>",
      histories: [],
      meta: { profilePic: "test" },
      name: { first: "nathy", last: "gyr" },
      role: { id: "123", name: "test role 4" },
      specialities: [],
      status: "active",
      __v: 0,
      _id: "1234"
    },
  ]

  constructor() {

    let result = this.data.map((item) => {
      return {
        teamMember: item?.name?.first + item?.name?.last,
        email: item?.email,
        role: item?.role?.name,
        assignedOn: null
      }
    }

    );
    console.log(result)
  }

}

Generate a collection of elements using a different collection as a reference

Answer №1

Answer №2

Similar questions

Change a JavaScript object into an array with different options while still maintaining the keys

Creating a 2D array from a 1D array of character strings in C is a straightforward process that involves defining

Ways to insert a div element into the HTML display utilizing JavaScript

How can I implement a dynamic progress bar using Ionic 4?

h1 tag set for jQuery AJAX activation

javascript change string into an array of objects

The computation outcome is not being displayed within the <h2> tag. Issue may be related to either

Utilizing the fetch() method to transmit GET data within the body rather than directly embedding it in the URL

Access the value of a JSON property, return null if the key is not found, all in one line of JavaScript code

Updating an element in an array using PHP

Troubleshooting a Simple JavaScript Game: Mastermind Edition

Changing values in object using Mongoose in MongoDB

Issue with dropdown element not triggering JavaScript onchange event

Angular's change detection mechanism triggers too frequently

Can the validity of a Control's property be adjusted?

Sort through object attributes according to a different object

Trying to use the `await` keyword results in a "SyntaxError: Unexpted identifier" message, even when used within an `async` function

Tips for aligning an element in the center in relation to its sibling above

Introduce a specialized hierarchical data structure known as a nested Record type, which progressively ref

The duplicate code is failing to display any output