Nested array of object data display on UI

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, Nov 23 '22 at 10:04
also [Map over nested array of objects in React](https://stackoverflow.com/questions/51615559/map-over-nested-array-of-objects-in-react) and [How to map a nested object](https://stackoverflow.com/questions/69811641/how-to-map-a-nested-object/69811958#69811958) — pilchard, Nov 23 '22 at 10:32

score -1 · Answer 1 · answered Nov 23 '22 at 09:57

-1

You can do this :

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

answered Nov 23 '22 at 09:57

Marios

339
1
14

Nested array of object data display on UI

1 Answers1