React.js: Get values as string from a state array

Question

I have this array of nested objects

(2) […]

0: {…}

actions: (3) […]

0: Object { actionId: "C7FCD770-7868-4357-8CA6-57A5C4DA1F1E", action: "ClientDetailsNew", description: "Enroll new Customer for Pesonet" }

1: Object { actionId: "D324327C-6709-4AF0-B2B3-A10557BFA6F4", action: "ClientDetailsDelete", description: "Delete Client details" }

2: Object { actionId: "7DFA8A4C-2C56-4D89-875D-CE522413E81B", action: "ClientDetailsUpdate", description: "Modify Client details" }

length: 3

<prototype>: Array []

description: "Client Enrollment"

module: "Client Maintenance"

moduleId: "4E948025-1F1B-41E2-A18D-55AD8646810B"

<prototype>: Object { … }

1: {…}

actions: (2) […]

0: Object { actionId: "05D7DF97-C794-4648-AAA0-506CAE35125B", action: "BankDetailsNew", description: "Enroll new bank for Pesonet" }

1: Object { actionId: "03ABA996-FB9A-4DA5-BD7C-7EC5E31F4A99", action: "BankDetailsDelete", description: "Delete bank details" }

length: 2

<prototype>: Array []

description: "Bank Enrollment"

module: "Bank Maintenance"

moduleId: "C77C1031-2714-483D-AE59-21C9CD5EBAEF"

<prototype>: Object { … }

length: 2

<prototype>: Array []

I would like to get all of the actionId. I tried the following solution:

const actionsNewMap = profileModule.map((actionsVar) => ({actions: actionsVar.actions}))
const actionIdNewMap = actionsNewMap.map(({actions}) => (actions.map((actionsMapVar) => ({actionId: actionsMapVar.actionId}))))
const actionIdNewMapList = actionIdNewMap.map(actionId => actionId);

So far, I'm getting these values:

(2) […]

0: (3) […]

0: Object { actionId: "C7FCD770-7868-4357-8CA6-57A5C4DA1F1E" }

1: Object { actionId: "D324327C-6709-4AF0-B2B3-A10557BFA6F4" }

2: Object { actionId: "7DFA8A4C-2C56-4D89-875D-CE522413E81B" }

length: 3

<prototype>: Array []

1: (2) […]

0: Object { actionId: "05D7DF97-C794-4648-AAA0-506CAE35125B" }

1: Object { actionId: "03ABA996-FB9A-4DA5-BD7C-7EC5E31F4A99" }

length: 2

<prototype>: Array []

length: 2

<prototype>: Array []

The problem is I only want 1 array of Strings and not multiple array of objects.

May I know what am I missing? Is map not sufficient for this kind of requirement?

--EDIT-- Adding raw valid JSON from the response

[
    {
        "moduleId": "4E948025-1F1B-41E2-A18D-55AD8646810B",
        "module": "Client Maintenance",
        "description": "Client Enrollment",
        "actions": [
            {
                "actionId": "C7FCD770-7868-4357-8CA6-57A5C4DA1F1E",
                "action": "ClientDetailsNew",
                "description": "Enroll new Customer for Pesonet"
            },
            {
                "actionId": "D324327C-6709-4AF0-B2B3-A10557BFA6F4",
                "action": "ClientDetailsDelete",
                "description": "Delete Client details"
            }
        ]
    }
]

I'm trying to get all the actionId as a string of array

what you want is 'flattening' of an array, then you can 'map' again to get required fields — Yehor Androsov, Apr 14 '20 at 08:01
I see. I tried something like this, `const actionIdNewMapList = actionIdNewMap.map(actionId => actionId);` I expected it to just output one array of String, however, I still get two array of objects. Could you explain a bit more how to flatten using map? Thanks — iamjpcbau, Apr 14 '20 at 08:09

Hashir Baig · Accepted Answer · 2020-04-14T08:36:59.873

2

Considering your array name is profileModule:

profileModule.map(item => item.actions.map(action => action.actionId)).flat()

Let me know if this works or you find a better solution.

Edit: Thanks to this SO answer. Found out about flat function from here.

edited Apr 14 '20 at 08:36

answered Apr 14 '20 at 08:33

Hashir Baig

2,162
15
23

jayarjo · Answer 2 · 2020-04-14T08:32:21.843

What you need is:

const actionIds = data.reduce((acc, subData) => 
    acc.concat(subData.actions.map(action => action.actionId)), [])

const data = [{
  "moduleId": "4E948025-1F1B-41E2-A18D-55AD8646810B",
  "module": "Client Maintenance",
  "description": "Client Enrollment",
  "actions": [{
      "actionId": "1-C7FCD770-7868-4357-8CA6-57A5C4DA1F1E",
      "action": "ClientDetailsNew",
      "description": "Enroll new Customer for Pesonet"
    },
    {
      "actionId": "1-D324327C-6709-4AF0-B2B3-A10557BFA6F4",
      "action": "ClientDetailsDelete",
      "description": "Delete Client details"
    }
  ]
}, {
  "moduleId": "4E948025-1F1B-41E2-A18D-55AD8646810B",
  "module": "Client Maintenance",
  "description": "Client Enrollment",
  "actions": [{
      "actionId": "2-C7FCD770-7868-4357-8CA6-57A5C4DA1F1E",
      "action": "ClientDetailsNew",
      "description": "Enroll new Customer for Pesonet"
    },
    {
      "actionId": "2-D324327C-6709-4AF0-B2B3-A10557BFA6F4",
      "action": "ClientDetailsDelete",
      "description": "Delete Client details"
    }
  ]
}]

const actionIds = data.reduce((acc, subData) => acc.concat(subData.actions.map(action => action.actionId)), [])

console.info(actionIds)

Where would I get `data.actions`, note that I set the value of the JSON response in a state array. Kindly see full code if needed. Thanks. — iamjpcbau, Apr 14 '20 at 08:33

React.js: Get values as string from a state array

2 Answers2