How to properly iterate and parse nested objects in javascript with or without lodash

Question

I'm currently working on a service that returns the following payload:

{
  "account1": {
    "app1": {
      "status": "Online",
      "comments": "blah blah",
      "events": [
        {
          "date": "some date",
          "generated_by": "some user"
        }
      ]
    }
  },
  "account2": {
    "app1": {
      "status": "Offline",
      "comments": "blah blah bleh",
      "events": [
        {
          "date": "some date",
          "generated_by": "some user"
        }
      ]
    },
    "app2": {
      "status": "Online",
      "comments": "blah blah",
      "events": [
        {
          "date": "some date",
          "generated_by": "some user"
        }
      ]
    }
  }
}

I'm trying to render a table with the following fields:

-------------------------------
Application | Account  | Status
-------------------------------
app1        | account1 | Online
app1        | account2 | Offline
app2        | account2 | Online

Normally this would be easy to do if my payload would be something like a list of objects but I'm kinda stuck here.

I tried to normalize this payload by extracting each of the fields and creating a new payload by doing something like the following:

const extractAccountNumber = Object.values(payload).map(account => ({account: account}))

which would return:

[
  {
    "account": "account1"
  },
  {
    "account": "account2"
  }
]

I wanted to move on to app name the same way and once I get all my fields I would merge the payload. This has proven to be super cumbersome and I'm sure there is a better, more efficient way to achieve this which I'm probably missing. Any feedback would help me a ton to understand how this can be achieved using javascript with or without lodash.

Fulldump · Accepted Answer · 2021-07-21 22:26:09Z

2

Iterating by first level and then by second level:

table = [];
for (accountName in apiResponse) {
    account = apiResponse[accountName];
    for (appName in account) {
        app = account[appName];
        table.push({
            application: appName,
            account: accountName,
            status: app.status,
        });
    }
}

Then table is something like this:

[
    {
        "application": "app1",
        "account": "account1",
        "status": "Online"
    },
    {
        "application": "app1",
        "account": "account2",
        "status": "Offline"
    },
    {
        "application": "app2",
        "account": "account2",
        "status": "Online"
    }
]

answered Jul 21, 2021 at 22:26

Fulldump

8836 silver badges10 bronze badges

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

Comments

Aleksandr Smyshliaev · Accepted Answer · 2021-07-21 21:54:32Z

0

Can try something like

Object.entries(o).map(([accountName, value]) => ({ 
    account: accountName,
    apps: Object.entries(value)
        .map(([appName, value]) => ({name: appName, ...value }))
}))

Not sure about structure. Where to put app1 from account2 in that table?

edited Jul 21, 2021 at 21:54

answered Jul 21, 2021 at 21:47

Aleksandr Smyshliaev

4284 silver badges10 bronze badges

1 Comment

Caliman Over a year ago

Yeah, I've tried this before. Unfortunately that's another headscratcher for me

Collectives™ on Stack Overflow

How to properly iterate and parse nested objects in javascript with or without lodash

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related