Nested array of object data display on UI [duplicate]

Question

I have following response from backend as an array of object,

const cloudData = [
  {
    dataCenter: "AWS-East",
    availablechannels: [
      {
        channelName: "E-channel1",
        id: 1,
      },
      {
        channelName: "E-channel2",
        id: 2,
      },
      {
        channelName: "E-channel3",
        id: 3,
      },
    ],
  },
  {
    dataCenter: "AWS-West",
    availablechannels: [
      {
        channelName: "W-channel1",
        id: 1,
      },
      {
        channelName: "W-channel2",
        id: 2,
      },
      {
        channelName: "W-channel3",
        id: 3,
      },
    ],
  },
];

I need to display on UI grid in following way ,

AWS East
E-channel1
E-channel2
E-channel3

I have tried using es6 map and filter

It's not clear what your expected output is? Is it an array, JSX, a string, .... something else? Please also share your attempts with .map() and .filter(). It's also not clear why you only want "AWS East" and not the other object (or did you just not include them for brevity? If so, you should indicate that in your question) — Nick Parsons
– Nick Parsons, Commented Nov 23, 2022 at 10:04
also Map over nested array of objects in React and How to map a nested object — pilchard
– pilchard, Commented Nov 23, 2022 at 10:32

Marios · Accepted Answer · 2022-11-23 09:57:18Z

-1

You can do this :

cloudData.forEach((datacenter)=> {
    console.log(datacenter.dataCenter)
    datacenter.availablechannels.forEach((channel)=>{
    console.log(channel.channelName)
       })
    })

answered Nov 23, 2022 at 9:57

Marios

3482 silver badges16 bronze badges

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

Collectives™ on Stack Overflow

Nested array of object data display on UI [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related