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
– Yehor Androsov, Commented Apr 14, 2020 at 8: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
– iamjpcbau, Commented Apr 14, 2020 at 8:09

Hashir Baig · Accepted Answer · 2020-04-14 08:36:59Z

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, 2020 at 8:36

answered Apr 14, 2020 at 8:33

Hashir Baig

2,38117 silver badges24 bronze badges

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

Comments

jayarjo · Accepted Answer · 2020-04-14 08:32:21Z

1

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)

edited Apr 14, 2020 at 8:32

answered Apr 14, 2020 at 8:26

jayarjo

16.8k25 gold badges102 silver badges149 bronze badges

2 Comments

iamjpcbau Over a year ago

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.

jayarjo Over a year ago

I've added a snippet.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related