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? — Shubham Khatri
– Shubham Khatri, Commented May 1, 2018 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 stackoverflow.com/questions/45391680/… — Shubham Khatri
– Shubham Khatri, Commented May 1, 2018 at 20:54

Rinkesh · Accepted Answer · 2018-05-02 14:55:34Z

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 2, 2018 at 14:55

answered May 1, 2018 at 21:09

Rinkesh

1321 gold badge1 silver badge11 bronze badges

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

4 Comments

R9102 Over a year ago

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 }

Rinkesh Over a year ago

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.

R9102 Over a year ago

by using boardDom i am nt getting the expected result

Rinkesh Over a year ago

please take a look at updated code. it'll return object as per your previous comment.

Achu · Accepted Answer · 2018-05-01 19:42:07Z

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 1, 2018 at 19:42

Achu

2722 silver badges10 bronze badges

2 Comments

R9102 Over a year ago

this data i am getting from the redux only i need to render the data

R9102 Over a year ago

before i was using this.states.widgets(local state), now need to do with this.props. that json data

Collectives™ on Stack Overflow

How to render objects of nested arrays

2 Answers 2

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related