Map nested object to array

Question

I have been hitting my head against a wall all day trying to solve this problem and also having searched on here i have found nothing as of yet.

My current object that is returned from an API is structured as so, i have over 2000 data points for each device:

{ "DeviceA": [

     {  "device_id": "DeviceA",
        "time": "2021-01-23T18:43:14Z",
        "temperature": 1.875,
        "strength": -14.827574,
        "maturity": 105.904513
     },
     {  "device_id": "ExampleB",
        "time": "2021-01-23T18:53:14Z",
        "temperature": 1.35,
        "strength": -145.64274540827574,
        "maturity": 10.904513
     },
             ]

 "DeviceB": [
     {  "device_id": "DeviceB",
        "time": "2021-01-23T18:43:14Z",
        "temperature": 1.5,
        "strength": -120.64274540827574,
        "maturity": 3233.04513
     },
     {  "device_id": "ExampleB",
        "time": "2021-01-23T18:53:14Z",
        "temperature": 1.875,
        "strength": -17.4274540827574,
        "maturity": 10554.268851904513
     },
}

And how i want it

[
  {
    "id": "DeviceA"
    "Data": [
      {
         "x": "time"
         "y": "temperature"
      }
     ]
  }
  {
    "id": "DeviceB"
    "Data": [
      {
         "x": "time"
         "y": "temperature"
      }
     ]
  }
]

I have tried nesting mapped arrays, millions of things but i can never get the right output. Any help would be massively appreciated!

Edit:

Apologies i had not included some code for what i was working on

  const graphAllTempVTime = () => {
const sensorTempVTimeMapped = Object.entries(sensorDatasFromCast).map(
  (items, index) => ({
    id: items[0],
    data: [
      {
        x: items[1].time,
        y: items[1].temperature,
      },
    ],
  })
)

return sensorTempVTimeMapped
}

However this produces the output of:

Just making sure I have this right. So your API is pushing out a giant object and not an array with objects? — ZimZimma
– ZimZimma, Commented Mar 31, 2021 at 18:21

Roberto Langarica · Accepted Answer · 2021-03-31 18:26:50Z

2

You could use: Object.keys() - check the docs It will take an object (like your first example) and returns the keys as an array, from there you could traverse each key and transform each value. You could also check Object.entries() it is newer so be aware of the platform support.

It could be helpful if you post some of the code that you are trying, and maybe the community could spot a fix

answered Mar 31, 2021 at 18:26

Roberto Langarica

7394 silver badges10 bronze badges

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

2 Comments

specialpeanut Over a year ago

Apologies for the lack of code, i have added it now, and thanks for your advice

Roberto Langarica Over a year ago

Don't worry. I'm seeing that there is people already trying to help you, my next advice will be to solve this on your own. It is one of those things that are simple once you get it right, seeing the other answers you can see what are the other people trying and you could use that for your own solution. In my opinion if someone gives you a working code that you only copy/paste then you will be missing the learning opportunity.

Unmitigated · Accepted Answer · 2021-03-31 18:53:04Z

1

You need to map over the value for each key.

let o = { "DeviceA": [ { "device_id": "DeviceA", "time": "2021-01-23T18:43:14Z", "temperature": 1.875, "strength": -14.827574, "maturity": 105.904513 }, { "device_id": "ExampleB", "time": "2021-01-23T18:53:14Z", "temperature": 1.35, "strength": -145.64274540827574, "maturity": 10.904513 }, ], "DeviceB": [ { "device_id": "DeviceB", "time": "2021-01-23T18:43:14Z", "temperature": 1.5, "strength": -120.64274540827574, "maturity": 3233.04513 }, { "device_id": "ExampleB", "time": "2021-01-23T18:53:14Z", "temperature": 1.875, "strength": -17.4274540827574, "maturity": 10554.268851904513 } ] };
const res = Object.entries(o).map(
  ([key,val], index) => ({
    id: key,
    data: val.map(x=>({x:x.time, y: x.temperature}))
  })
)
console.log(res)

answered Mar 31, 2021 at 18:53

Unmitigated

91.4k12 gold badges102 silver badges109 bronze badges

2 Comments

specialpeanut Over a year ago

This works fantastic and is far the fastest performing answer! Thanks ever so much!!

Unmitigated Over a year ago

@AndreaCorrado Happy to help.

Sten Muchow · Accepted Answer · 2021-03-31 19:14:26Z

1

Some very simple ways to get started have been mentioned above, but this is the classic functional programming problem in JS. Problems like this are what make my day interesting.

Object.keys(THE_OBEJCT)
  .map(name =>
    THE_OBEJCT[name].map(device => ({
      id: name,
      Data: THE_OBEJCT[name].map(device => ({
        time: device.time,
        temperature: device.temperature
      }))
    }))
  )
  .map(d =>
    d.reduce((memo, d) => ({ id: d.id, data: memo.data.concat(d.Data) }), {
      data: []
    })
  )

Is very basic, but will create an array of objects that look like this...

edited Mar 31, 2021 at 19:14

answered Mar 31, 2021 at 18:39

Sten Muchow

6,7314 gold badges38 silver badges46 bronze badges

9 Comments

specialpeanut Over a year ago

This is great thanks. However i do not get the same output as you, what you have is correct.. This is the output i get: imgur.com/JjLT6Yi

Sten Muchow Over a year ago

you want Data as an array or an object?

specialpeanut Over a year ago

I feel like the id needs to be outside the second map, so that there is only one ID and then data in the next array.

specialpeanut Over a year ago

This is how it should look, imagine also there is multiple other device sets as in this example in the picture there is only one. imgur.com/u7Y1Vog

Sten Muchow Over a year ago

OK Ive updated to what i think you want. It could be cleaner, but there you go...

|

ZimZimma · Accepted Answer · 2021-03-31 18:31:04Z

0

const newArr = []

Object.keys(myObject).map((key, index) => {
  newArr.push(
  {
    id: key,
    Data: [
      {
        x: myObject[key][0].time,
        y: myObject[key][0].temperature,
      }
    ],
  }
  )
});

Something like this perhaps.

answered Mar 31, 2021 at 18:31

ZimZimma

2481 gold badge2 silver badges10 bronze badges

1 Comment

specialpeanut Over a year ago

Thanks, but i do not really understand the output of this at all? It seems to only output a small array = [1,2]

Collectives™ on Stack Overflow

Map nested object to array

4 Answers 4

2 Comments

2 Comments

9 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

9 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related