angularjs, need to transform object properties

Question

In my angularjs application I have model which is array of objects as shown below:

 $scope.originalData = [{

     "id": 10000,
     "transactionid": "gec43434",
     "status": "COMPLETED",
     "session_id": "TTYUU455667",
     "errors": "1",
     "start_timestamp": "2016-11-07 02:35:35",
     "log_field": "Sample Text For Testing"

 }, {

     "id": 10001,
     "transactionid": "r34fdfdf",
     "status": "COMPLETED",
     "session_id": "dfdfer3453df",
     "errors": "3",
     "start_timestamp": "2016-10-07 03:20:15",
     "log_field": "Sample Text2 For Testing"

 }];

Now I need to modify the same array of objects to appear as shown below, except log_field remaining all properties should go under another property of the same object.

$scope.modifiedData = [{
     "subItems": {
         "id": 1000,
         "transactionid": "gec43434",
         "status": "COMPLETED",
         "session_id": "TTYUU455667",
         "errors": "1",
         "start_timestamp": "2016-11-07 02:35:35"
     },
     "log_field": "Sample Text For Testing"

 }, {
     "subItems": {
         "id": 10001,
         "transactionid": "r34fdfdf",
         "status": "COMPLETED",
         "session_id": "dfdfer3453df",
         "errors": "3",
         "start_timestamp": "2016-10-07 03:20:15"
     },
     "log_field": "Sample Text2 For Testing"

 }]

This really has nothing to do with AngularJS

Phil
– Phil

2016-11-23 06:11:26 +00:00
Commented Nov 23, 2016 at 6:11 — Phil
– Phil, Commented Nov 23, 2016 at 6:11

Sreekanth · Accepted Answer · 2016-11-23 06:16:20Z

Here is what you could do. using Array.map and delete.

var originalData = [{
  "id": 10000,
  "transactionid": "gec43434",
  "status": "COMPLETED",
  "session_id": "TTYUU455667",
  "errors": "1",
  "start_timestamp": "2016-11-07 02:35:35",
  "log_field": "Sample Text For Testing"
}, {
  "id": 10001,
  "transactionid": "r34fdfdf",
  "status": "COMPLETED",
  "session_id": "dfdfer3453df",
  "errors": "3",
  "start_timestamp": "2016-10-07 03:20:15",
  "log_field": "Sample Text2 For Testing"
}];


var result = originalData.map((item) => {
  var log_field = item.log_field;
  delete item.log_field;
  return {
    "subItems": item,
    "log_field": log_field
  };
});

console.log(result);

In case,If you shouldn't modify the original data, here is what you could do.

var originalData = [{
  "id": 10000,
  "transactionid": "gec43434",
  "status": "COMPLETED",
  "session_id": "TTYUU455667",
  "errors": "1",
  "start_timestamp": "2016-11-07 02:35:35",
  "log_field": "Sample Text For Testing"
}, {
  "id": 10001,
  "transactionid": "r34fdfdf",
  "status": "COMPLETED",
  "session_id": "dfdfer3453df",
  "errors": "3",
  "start_timestamp": "2016-10-07 03:20:15",
  "log_field": "Sample Text2 For Testing"
}];


var result = originalData.map((item) => {
  //Withou modifying original data.
  var resultItem = Object.assign({}, item),
    log_field = resultItem.log_field;
  delete resultItem.log_field;

  return {
    "subItems": resultItem,
    "log_field": log_field
  };
});
console.log(originalData);
console.log(result);

Joshua Russell · Accepted Answer · 2016-11-23 06:16:01Z

1

Here's my approach that will add all fields, regardless of your data structure. This is "slightly" future proof should your fields need to change. All fields will be added to subItems with the exception of log_field.

var data = [
  {
    "id": 10000,
    "transactionid": "gec43434",
    "status": "COMPLETED",
    "session_id": "TTYUU455667",
    "errors": "1",
    "start_timestamp": "2016-11-07 02:35:35",
    "log_field": "Sample Text For Testing"
  },
  {
    "id": 10001,
    "transactionid": "r34fdfdf",
    "status": "COMPLETED",
    "session_id": "dfdfer3453df",
    "errors": "3",
    "start_timestamp": "2016-10-07 03:20:15",
    "log_field": "Sample Text2 For Testing"
  }
];

var newData = [];

data.forEach(function(object) {

  // Create a new temporary object
  var temp = {
    subItems: {}
  };

  // Loop through the existing object
  for (var key in object) {

    // Leave the log field out of sub items
    if (key === "log_field") temp[key] = object[key];

    // Add all other keys/values to the subItems object
    temp["subItems"][key] = object[key];
  }

  // Push the new object to the newData array
  newData.push(temp);
});

console.log(newData);

edited Nov 23, 2016 at 6:16

answered Nov 23, 2016 at 6:06

Joshua Russell

7005 silver badges14 bronze badges

1 Comment

Phil Over a year ago

Answers should contain the code. Links to external sites may supplement your answer but the important parts should be here on StackOverflow

Phil · Accepted Answer · 2016-11-23 06:27:35Z

1

Seems simple enough

const originalData = [{"id":10000,"transactionid":"gec43434","status":"COMPLETED","session_id":"TTYUU455667","errors":"1","start_timestamp":"2016-11-07 02:35:35","log_field":"Sample Text For Testing"},{"id":10001,"transactionid":"r34fdfdf","status":"COMPLETED","session_id":"dfdfer3453df","errors":"3","start_timestamp":"2016-10-07 03:20:15","log_field":"Sample Text2 For Testing"}]

const doNotMap = 'log_field'
const modifiedData = originalData.map(d => {
  let subKeys = Object.keys(d).filter(key => key !== doNotMap)
  return {
    subItems: subKeys.reduce((obj, key) => {
      return Object.assign(obj, {
        [key]: d[key]
      })
    }, Object.create(null)),
    [doNotMap]: d[doNotMap]
  }
})

console.info('Modified =', modifiedData)
console.log('Original =', originalData)

So here's the not too different, pre ES2015 version

var originalData = [{"id":10000,"transactionid":"gec43434","status":"COMPLETED","session_id":"TTYUU455667","errors":"1","start_timestamp":"2016-11-07 02:35:35","log_field":"Sample Text For Testing"},{"id":10001,"transactionid":"r34fdfdf","status":"COMPLETED","session_id":"dfdfer3453df","errors":"3","start_timestamp":"2016-10-07 03:20:15","log_field":"Sample Text2 For Testing"}]

var doNotMap = 'log_field'
var modifiedData = originalData.map(function(d) {
  var subKeys = Object.keys(d).filter(function(key) {
    return key !== doNotMap
  })
  var modified = Object.create(null)
  modified.subItems = subKeys.reduce(function(obj, key) {
    var keyObj = Object.create(null)
    keyObj[key] = d[key]
    return Object.assign(obj, keyObj)
  }, Object.create(null))

  modified[doNotMap] = d[doNotMap]
  return modified
})

console.info('Modified =', modifiedData)
console.log('Original =', originalData)

edited Nov 23, 2016 at 6:27

answered Nov 23, 2016 at 6:05

Phil

166k25 gold badges265 silver badges269 bronze badges

8 Comments

Phil Over a year ago

@Mahi an answer. ES2015 is supported in a lot of browsers now and babel takes care of the rest

Mahi Over a year ago

i cannot upvote this . cuz i don't know if it is right or wrong

Joshua Russell Over a year ago

@Phil ES2015 is nice, but it's tough assumption that everyone is using it... I would stick to regular JS answers that everyone can use. If they're smart enough to port to ES6 then so be it.

Mahi Over a year ago

no that's not right . what if you change original array or something .

Phil Over a year ago

@Splurtcake not sure what you mean. ES2015 is regular JS

|

Collectives™ on Stack Overflow

angularjs, need to transform object properties

3 Answers 3

Comments

1 Comment

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related