How to render objects of nested arrays

Question

i want to render this objects of nested arrays.

i need all the widgest list to be renderd to particular boardId

can i get help on this please

need to render these as this.props.----

storyboard: {
boardList: [
  {
    boardId: 'c428148c-0f31-48d5-87a2-bf7a3eb7c3db',
    boardTitle: 'Board1',
    createdAt: 1525198421135,
    modifiedAt: 1525198466016,
    widgetList: [
      {
        widgetId: '4015e24a-aac6-4480-8cb4-a1b72c4cc5ff',
        widgetName: 'Venn',
        widgetType: 'venn',
        leftTarget: '',
        rightTarget: '',
        leftTargetValue: 0,
        rightTargetValue: 0
      },
      {
        widgetId: 'bf363922-60d6-4bf0-8f1a-ddf5c0c6eee7',
        widgetName: 'Venn',
        widgetType: 'venn',
        leftTarget: '',
        rightTarget: '',
        leftTargetValue: 0,
        rightTargetValue: 0
      }
    ]
  }
]
}

Possible Duplicate of [How to render an array of objects in React?](https://stackoverflow.com/questions/41374572/how-to-render-an-array-of-objects-in-react/41374730#41374730) — Shubham Khatri, May 01 '18 at 19:47
all i am infer from your question is that you want to render the nested array of object, The duplicate question although for one level explains how to do it. All you need is to do it in nested manner. If its still not clear, check this https://stackoverflow.com/questions/45391680/render-a-nested-array-of-objects-in-react/45391798#45391798 — Shubham Khatri, May 01 '18 at 20:54

score 1 · Answer 1 · answered May 01 '18 at 19:42

1

Pass this as string using JSON.stringify via attribute and then use inside the component. Best way would be to use redux to store the json and then use it via connect() method from react-redux.

answered May 01 '18 at 19:42

Achu

272
2
10

this data i am getting from the redux only i need to render the data – R9102 May 01 '18 at 19:44
before i was using this.states.widgets(local state), now need to do with this.props. that json data – R9102 May 01 '18 at 19:45

Rinkesh · Accepted Answer · 2018-05-02T14:55:34.413

1

Assuming the possibility of multiple boardlist, You can get the boardList using following code:

const { boardList } = {...this.props.storyboard}

then you can get widgetList by looping through the boardlist.

Following is the sample to get widgets;

const { boardList } = {...this.props.storyboard}
const boards = boardList.map(function (board) {
  return board.widgetList.map(widget => Object.assign(widget, {boardId: board.boardId}))
})

edited May 02 '18 at 14:55

answered May 01 '18 at 21:09

Rinkesh

132
1
1
11

Hi Rinkesh,Can i get data like{boardId: 'c428148c-0f31-48d5-87a2-bf7a3eb7c3db',widgetId: '4015e24a-aac6-4480-8cb4-a1b72c4cc5ff', widgetName: 'Venn', widgetType: 'venn', leftTarget: '',rightTarget: '',leftTargetValue: 0, rightTargetValue: 0 } – R9102 May 01 '18 at 22:51
Yes. as you've widget object in inner map function, you can get all details of that object. For example, `widget.leftTarget` `widget.rightTarget` and so on. – Rinkesh May 02 '18 at 00:08
by using boardDom i am nt getting the expected result – R9102 May 02 '18 at 03:53
please take a look at updated code. it'll return object as per your previous comment. – Rinkesh May 02 '18 at 14:29

How to render objects of nested arrays

2 Answers2