Javascript to manipulate object structure

Question

I have a javascript object with the following schema:

[{
    face:"n",
    values:[
        {time:"15:00",value:5}
        {time:"15:02",value:6}
    ]
},{
    face:"e",
    values:[
        {time:"15:01",value:7}
        {time:"15:02",value:8}
    ]
},{
    face:"s",
    values:[
        {time:"15:01",value:7}
        {time:"15:02",value:8}
    ]
},{
    face:"w",
    values:[
        {time:"15:01",value:7}
        {time:"15:02",value:8}
    ]
}]

How to convert it to the following structure:

[
    {time:"15:00","n":5,"e":null,"s":null,"w":null},
    {time:"15:01","n":null,"e":7,"s":7,"w":7},
    {time:"15:02","n":6,"e":8,"s":8,"w":8},
]

• The number of faces will be fixed (north, east, south, west)
• It is possible that some timestamps are missing. In that case we need to fill the value with 'null' (see example above).

Answer 1

You can easily achieve the result using Map , reduce and forEach

with this approach the ordering is not particular, If you want the exact time ordering then you can sort it using the following custorm sort comparator function

result.sort((a, b) => +a.time.match(/\d+/g).join("") - b.time.match(/\d+/g).join(""))

 const arr = [ { face: "n", values: [ { time: "15:00", value: 5 }, { time: "15:02", value: 6 }, ], }, { face: "e", values: [ { time: "15:01", value: 7 }, { time: "15:02", value: 8 }, ], }, { face: "s", values: [ { time: "15:01", value: 7 }, { time: "15:02", value: 8 }, ], }, { face: "w", values: [ { time: "15:01", value: 7 }, { time: "15:02", value: 8 }, ], }, ]; const map = new Map(); const result = [ ...arr.reduce((acc, { face, values }) => { values.forEach(({ time, value }) => { if (!acc.has(time)) acc.set(time, { time, n: null, e: null, s: null, w: null }); acc.get(time)[face] = value; }); return acc; }, map) .values(), ]; console.log(result);

 /* This is not a part of answer. It is just to give the output full height. So IGNORE IT */ .as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

Because you haven't added what you tried so far (which is kinda useless for this task, IMHO), I will just answer in form of how I would tackle this task.

1. Locate your unique value in your expected output: time .

2. Loop through your array, and create an object with keys based on time . Save the properties name and each of the four faces, by first creating null values for all faces, and then filling it out with one value at time as a new timestamp appears in the array.

   Here is how the whole object will look like:
   {
"15:00": {time:"15:00","n":5,"e":null,"s":null,"w":null},
"15:01": {time:"15:01","n":null,"e":7,"s":7,"w":7},
"15:02": {time:"15:02","n":6,"e":8,"s":8,"w":8
}

3. Loop through the object—with for... in , [edit] or by simply using Object.values —to create an array out of it.

You can probably use some smart Array.reduce() functionality to minimize the code.

Answer 3

 let old_array = [{ face: "n", values: [ { time: "15:00", value: 5 }, { time: "15:02", value: 6 } ] }, { face: "e", values: [ { time: "15:01", value: 7 }, { time: "15:02", value: 8 } ] }, { face: "s", values: [ { time: "15:01", value: 7 }, { time: "15:02", value: 8 } ] }, { face: "w", values: [ { time: "15:01", value: 7 }, { time: "15:02", value: 8 } ] }]; let new_array = [] let times = {} let faces = {"n": "north", "e": "east", "s": "south", "w": "west"} old_array.forEach((obj) => { obj.values.forEach((val) => { if(val.time in times) times[val.time][faces[obj.face]] = val.value else { let newT = {time: val.time, "north": null, "east": null, "south": null, "west": null} newT[faces[obj.face]] = val.value times[val.time] = newT new_array.push(newT) } }) }) new_array.sort((a,b)=>a.time < b.time ? -1 : (a.time > b.time ? 1 : 0)) console.log(new_array) // Expected output // [ // { time: '15:00', north: 5, east: null, south: null, west: null }, // { time: '15:01', north: null, east: 7, south: 7, west: 7 }, // { time: '15:02', north: 6, east: 8, south: 8, west: 8 } // ]