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).

Familiarize yourself with [how to access and process nested objects, arrays or JSON](/q/11922383/4642212) and how to [create objects](//developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Object_initializer) and use the available static and instance methods of [`Object`](//developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object#Static_methods) and [`Array`](//developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array#Static_methods). — Sebastian Simon, Oct 31 '21 at 10:25
You're missing `"n": null` in 15:01 and 15:02 in your expected output. — Rickard Elimää, Oct 31 '21 at 10:32
I am familiar with javascript array functions. Including map, filter and reduce. But this transformation is not trivial. I was thinking maybe there is a more elegant way than just brute force it — justadev, Oct 31 '21 at 10:33

DecPK · Accepted Answer · 2021-10-31T11:01:34.163

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; }

Thanks! Exactly what I was looking for :) – justadev Oct 31 '21 at 11:32 — justadev, Oct 31 '21 at 11:32

Rickard Elimää · Answer 2 · 2021-10-31T10:48:11.137

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.

Locate your unique value in your expected output: time.
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
}
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.

Bah, I just assumed that you couldn't have colons, because I forgot that keys are strings. Thank you for correcting me. — Rickard Elimää, Oct 31 '21 at 10:51

score 0 · Answer 3 · answered Oct 31 '21 at 11:23

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 }
// ]

Javascript to manipulate object structure

3 Answers3