How to transform my array of objects to get this output?

Question

I have an array of objects and need to change it in order to insert a chart in my angular app. Below is my attempt. I need help to figure out how I can change my current code in order to get the desired output. I am still learning javascript and consider myself a student. Thus, any explanations or guidance will be welcomed.

The desired output is similar to this. This is my reference.

[
  {
    "name": "Seychelles",
    "series": [
      {
        "value": 5452,
        "name": "2016-09-19T10:32:55.756Z"
      },
      {
        "value": 3412,
        "name": "2016-09-17T10:51:42.303Z"
      },
      {
        "value": 3270,
        "name": "2016-09-12T22:19:48.181Z"
      },
      {
        "value": 2061,
        "name": "2016-09-22T14:10:00.900Z"
      },
      {
        "value": 2717,
        "name": "2016-09-21T01:34:27.855Z"
      }
    ]
  },
  {
    "name": "Andorra",
    "series": [
      {
        "value": 4200,
        "name": "2016-09-19T10:32:55.756Z"
      },
      {
        "value": 5142,
        "name": "2016-09-17T10:51:42.303Z"
      },
      {
        "value": 5999,
        "name": "2016-09-12T22:19:48.181Z"
      },
      {
        "value": 3736,
        "name": "2016-09-22T14:10:00.900Z"
      },
      {
        "value": 5471,
        "name": "2016-09-21T01:34:27.855Z"
      }
    ]
  },
  {
    "name": "Barbados",
    "series": [
      {
        "value": 2332,
        "name": "2016-09-19T10:32:55.756Z"
      },
      {
        "value": 2341,
        "name": "2016-09-17T10:51:42.303Z"
      },
      {
        "value": 2488,
        "name": "2016-09-12T22:19:48.181Z"
      },
      {
        "value": 5246,
        "name": "2016-09-22T14:10:00.900Z"
      },
      {
        "value": 5871,
        "name": "2016-09-21T01:34:27.855Z"
      }
    ]
  },
  {
    "name": "Peru",
    "series": [
      {
        "value": 3122,
        "name": "2016-09-19T10:32:55.756Z"
      },
      {
        "value": 3925,
        "name": "2016-09-17T10:51:42.303Z"
      },
      {
        "value": 3268,
        "name": "2016-09-12T22:19:48.181Z"
      },
      {
        "value": 4939,
        "name": "2016-09-22T14:10:00.900Z"
      },
      {
        "value": 4336,
        "name": "2016-09-21T01:34:27.855Z"
      }
    ]
  },
  {
    "name": "Romania",
    "series": [
      {
        "value": 2169,
        "name": "2016-09-19T10:32:55.756Z"
      },
      {
        "value": 3850,
        "name": "2016-09-17T10:51:42.303Z"
      },
      {
        "value": 6793,
        "name": "2016-09-12T22:19:48.181Z"
      },
      {
        "value": 4827,
        "name": "2016-09-22T14:10:00.900Z"
      },
      {
        "value": 2696,
        "name": "2016-09-21T01:34:27.855Z"
      }
    ]
  }
]

This is my attempt and a sample of the raw data to transform.

function cleanData(data) {
    const emp = [];
    const keys = Object.keys(data[0]);

    for (let i = 0; i < data.length; i++) {
        if(keys[i] != 'date') {
        let obj = {};
        let obj2 = {};
        obj["name"] = keys[i];
        obj["series"] = [];
        obj2["values"] = data[i][keys[i]]
        obj2["name"] = data[i].date
        obj["series"].push(obj2);
        emp.push(obj);
        }
    }
    console.log(emp);          
}

const arr = [
    {
        "date": "2018-07-01",
        "nb_uniq_visitors": 573,
        "nb_visits": 621,
        "nb_users": 50,
        "nb_actions": 1102,
        "max_actions": 23,
        "bounce_count": 381
    },
    {
        "date":"2018-07-02",
        "nb_uniq_visitors": 243,
        "nb_visits": 571,
        "nb_users": 67,
        "nb_actions": 1002,
        "max_actions": 33,
        "bounce_count": 452
    },
    {
        "date": "2018-07-03",
        "nb_uniq_visitors": 203,
        "nb_visits": 98,
        "nb_users": 66,
        "nb_actions": 902,
        "max_actions": 73,
        "bounce_count": 432
    }  		
];
cleanData(arr);

The names will be the object keys. I am planning to write a function with switch statements to transform the keys to good names. Example: nb_users will become Number Of Users. — user2750175
– user2750175, Commented Aug 7, 2018 at 4:11
@brk The output is similar to what I want to achieve with my data. It is just a reference. — user2750175
– user2750175, Commented Aug 7, 2018 at 4:17

CertainPerformance · Accepted Answer · 2018-08-07 04:19:41Z

2

Try reduceing into an object indexed by name (the keys of the objects), and then calling Object.values on the result to turn it back into an array:

const arr=[{"date":"2018-07-01","nb_uniq_visitors":573,"nb_visits":621,"nb_users":50,"nb_actions":1102,"max_actions":23,"bounce_count":381},{"date":"2018-07-02","nb_uniq_visitors":243,"nb_visits":571,"nb_users":67,"nb_actions":1002,"max_actions":33,"bounce_count":452},{"date":"2018-07-03","nb_uniq_visitors":203,"nb_visits":98,"nb_users":66,"nb_actions":902,"max_actions":73,"bounce_count":432}];
    
const itemsByKey = arr.reduce((a, { date, ...obj }) => {
  Object.entries(obj).forEach(([key, value]) => {
    if (!a[key]) a[key] = { name: key, series: [] };
    a[key].series.push({ name: date, value });
  });
  return a;
}, {});
console.log(Object.values(itemsByKey));

answered Aug 7, 2018 at 4:19

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2750175 Over a year ago

That's perfect. Thanks!

Collectives™ on Stack Overflow

How to transform my array of objects to get this output?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related