Convert an array into object array with ids in JavaScript

Question

I have the following array

["Design", "Survey", "Geotech", "Community", "Progress", "Planning", "Commercial", "Logistics", "Milestones", "Environment", "Quality", "Safety"]

and I would like to convert into it the following format, would be nice if the ids were random or unique

data = [
    {id: 1, title: 'Design'},
    {id: 2, title: 'Survey'},
    {id: 3, title: 'Geotech'},
    {id: 4, title: 'Community'},
  ];
}

Psidom · Accepted Answer · 2017-08-08T00:18:20.067

5

You can access the index of the array element in the map callback function via the second parameter, so minimally it could be (if you don't care about whether id starts from 0 or 1):

var arr = ["Design", "Survey", "Geotech", "Community", "Progress", "Planning", "Commercial", "Logistics", "Milestones", "Environment", "Quality", "Safety"];

console.log(
  arr.map((title, id) => ({id, title}))
);

If starts from 1:

var arr = ["Design", "Survey", "Geotech", "Community", "Progress", "Planning", "Commercial", "Logistics", "Milestones", "Environment", "Quality", "Safety"];

console.log(
  arr.map((title, id) => ({id: id+1, title}))
);

edited Aug 08 '17 at 00:18

answered Aug 08 '17 at 00:15

Psidom

209,562
33
339
356

`id + 1` in the map function since OP wants 1-based id's. – DocMax Aug 08 '17 at 00:15
also its not so understandable that how it works , at least for me – Javad Aug 08 '17 at 00:16
@DocMax Since OP states that the `id` could be random, I guess it doesn't matter as much. But good point. – Psidom Aug 08 '17 at 00:19
Thanks this is perfect – Almog Aug 08 '17 at 00:27

score 3 · Answer 2 · edited Aug 08 '17 at 00:19

3

You can use map for that:

var array = ["Design", "Survey", "Geotech", "Community", "Progress", "Planning", "Commercial", "Logistics", "Milestones", "Environment", "Quality", "Safety"];

var id = 1;
var data = array.map(function(x) {
  return {
    id: id++,
    title: x
  };
});

console.log(data);

edited Aug 08 '17 at 00:19

abagshaw

6,162
4
38
76

answered Aug 08 '17 at 00:13

Hugo sama

899
1
9
19

score 1 · Answer 3 · answered Aug 08 '17 at 00:21

   var oldarr = [
   "Design", "Survey", "Geotech", "Community", "Progress", 
   "Planning", "Commercial", "Logistics", "Milestones", "Environment", 
   "Quality", "Safety"];

   var newArr = oldArr.map(function (element,index) {
     return { id : index + 1, title:element};
   });

score 0 · Answer 4 · edited Aug 08 '17 at 00:59

To generate Unique ID's, you can use this function from @broofa (taken from this answer) which uses window.crypto, then use it in the map method:

function uuidv4() {
    return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c => 
        (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
    )
}

var data = ["Design", "Survey", "Geotech", "Community"];

var newArray = data.map(title => ({id: uuidv4(), title}));

console.log(newArray)

Note that the above uses a number of recent features, so not particularly compatible with older browsers.

score 0 · Answer 5 · answered Aug 08 '17 at 00:32

0

how about reduce

["Design", "Survey", "Geotech", "Community", "Progress", "Planning", "Commercial", "Logistics", "Milestones", "Environment", "Quality", "Safety"].reduce((accum , curr, indx) => accum.concat({id: indx+1, title: curr}), []);

answered Aug 08 '17 at 00:32

kunal_bohra

71
5

Convert an array into object array with ids in JavaScript

5 Answers5