Daniel Chikaka
Daniel Chikaka

Reputation: 1692

How to iterate through json object and form a new object with concatenated values using Javascript?

I have been working on api which gives data in JSON object and i have no control with it at all. I need to pull data on select box. I have managed to populate it but it allows single value binding only. ie firstName or lastName or middleName and not both. Here is my current JSON Object:

.employeesList = [
  {
    id: 1,
    firstName: 'firstName',
    middleName: 'middleName',
    lastName: 'lastName',
  },
  {
    id: 2,
    firstName: 'firstName2',
    middleName: 'middleName2',
    lastName: 'lastName2',
  },
  {
    id: 3,
    firstName: 'firstName3',
    middleName: 'middleName3',
    lastName: 'lastName3',
  },
  {
    id: 4,
    firstName: 'firstName4',
    middleName: 'middleName4',
    lastName: 'lastName4',
  },
  {
    id: 5,
    firstName: 'firstName5',
    middleName: 'middleName5',
    lastName: 'lastName5',
  }
]

I would like to merge firstName, middleName and lastName in each data and form a new JSON Object having only ids and fullNames like so:

.employeesList = [
  {
    id: 1,
    fullName: 'firstName MiddleName LastName'
  },
  {
    id: 2,
    fullName: 'firstName2 MiddleName2 LastName2'
  },
  {
    id: 3,
    fullName: 'firstName3 MiddleName3 LastName3'
  },
  {
    id: 4,
    fullName: 'firstName4 MiddleName4 LastName4'
  },
  {
    id: 5,
    fullName: 'firstName5 MiddleName5 LastName5'
  }
]

How can i achieve that using Javascript?

Upvotes: 0

Views: 131

Answers (4)

sergioBertolazzo
sergioBertolazzo

Reputation: 604

I use this code and work fine for me. (need JQuery).

var newEmployeesList = [];
$.each(employeesList, function(key, item) {

    var f_name = item.firstName;

    var m_name = item.middleName;

    var l_name = item.lastName;

    var obj = new Object();
    obj.id = key;
    obj.fullName = f_name + " " + m_name + " " + l_name;

    newEmployeesList.push(obj);

});

Upvotes: 0

Mikhail Katrin
Mikhail Katrin

Reputation: 2384

newList = employeesList.map((empl) => {
    return {
        id: empl.id, fullName: empl.firstName + ' ' + empl.middleName + ' ' + empl.lastName}
    }
)

Upvotes: 0

Rajkumar Somasundaram
Rajkumar Somasundaram

Reputation: 1270

var employeesList = [ {
    id: 1,
    firstName: 'firstName',
    middleName: 'middleName',
    lastName: 'lastName',
  },
  {
    id: 2,
    firstName: 'firstName2',
    middleName: 'middleName2',
    lastName: 'lastName2',
  },
  {
    id: 3,
    firstName: 'firstName3',
    middleName: 'middleName3',
    lastName: 'lastName3',
  },
  {
    id: 4,
    firstName: 'firstName4',
    middleName: 'middleName4',
    lastName: 'lastName4',
  },
  {
    id: 5,
    firstName: 'firstName5',
    middleName: 'middleName5',
    lastName: 'lastName5',
  }
]


employeesList.map((obj) => {  
  obj["fullName"] = obj["firstName"] + " " + obj["middleName"] + " "  +obj["lastName"];
  delete obj["firstName"];
  delete obj["middleName"];
  delete obj["lastName"];
  console.log(obj)
});

Upvotes: 0

Faly
Faly

Reputation: 13346

Use array.prototype.map:

var employeesList = [
  {
    id: 1,
    firstName: 'firstName',
    middleName: 'middleName',
    lastName: 'lastName',
  },
  {
    id: 2,
    firstName: 'firstName2',
    middleName: 'middleName2',
    lastName: 'lastName2',
  },
  {
    id: 3,
    firstName: 'firstName3',
    middleName: 'middleName3',
    lastName: 'lastName3',
  },
  {
    id: 4,
    firstName: 'firstName4',
    middleName: 'middleName4',
    lastName: 'lastName4',
  },
  {
    id: 5,
    firstName: 'firstName5',
    middleName: 'middleName5',
    lastName: 'lastName5',
  }
];

var newEmployeesList = employeesList.map(e => ({id: e.id, fullName: `${e.firstName} ${e.middleName} ${e.lastName}`}));
console.log(newEmployeesList);

Upvotes: 6

Related Questions