how to iterate in nested array

Question

Hello I have JSON structured like this, and I need to iterate over the items

[
  {
    "name": "About You",
    "questions": [
      {
        "questionText": "What is your surname?",
        "answers": [
          {
            "text": "Thomas"
          }
        ]
      },
      {
        "questionText": "Where do you work?",
        "answers": [
          {
            "text": "Finance"
          }
        ]
      },
    ]
  },
  {
    "name": "About Family",
    "questions": [
      {
        "questionText": "Childeren",
        "answers": [
          {
            "text": "Yes"
          }
        ]
      },
      {
        "questionText": "Married",
        "answers": [
          {
            "text": "No"
          }
        ]
      },
    ]
  },
  {
    "name": "Travel",
    "questions": [
      {
        "questionText": "Do you travel a lot?",
        "answers": [
          {
            "text": "Yes"
          }
        ]
      }
    ]
  }
]

I started with this code but I don't know how to show all the nested items. Should I use another map function? I would like to have format that will show table with questionTexts and answers text

{details.map((detail, i) => (
    <div key={i}>
      <div>{detail.name}</div>
      <div>{detail.questions ? detail.questions[0].questionText : ''}</div>
      <div>{detail.questions ? detail.questions[0].answers[0].text : ''}</div>
    </div>
  )
)}

thank you

You'll want to use something other than index as key, detail.name would be better. — pilchard
– pilchard, Commented Jun 3, 2021 at 14:44

3limin4t0r · Accepted Answer · 2021-06-03 14:59:16Z

Should I use another map function?

Yes

First, map through the details array
details.map((detail, i) =>
Map through the current detail.questions
detail.questions.map((question) => (
Optionally, apply the same logic for question.answers
question.answers.map((question) => (

Small example were we show all the questions:

class Example extends React.Component { 
    render() {
        const  details = [{"name": "About You", "questions": [{"questionText": "What is your surname?", "answers": [{"text": "Thomas"} ] }, {"questionText": "Where do you work?", "answers": [{"text": "Finance"} ] }, ] }, {"name": "About Family", "questions": [{"questionText": "Childeren", "answers": [{"text": "Yes"} ] }, {"questionText": "Married", "answers": [{"text": "No"} ] }, ] }, {"name": "Travel", "questions": [{"questionText": "Do you travel a lot?", "answers": [{"text": "Yes"} ] } ] } ];
        
        return (
            details.map((detail, i) => (
                <div key={detail.name} class='question'>
                    <b>{detail.name}</b>
                    {
                        detail.questions.map((question) => (
                            <em key={question.questionText}>
                                Question: {question.questionText}
                            </em>
                        ))
                    }
                </div>
            ))
        );
    }
}

ReactDOM.render(<Example />, document.body);

.question {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Additional notes

Changed the key={} to the name of the question to we're sure it's unique
Added a key to the nested map(), using the question itself
_{Thx to @pilchard for noticing}

Glad it helped! Please consider upvoting or accepting any answers that might have helped you. This indicates to the wider community that you've found a solution and gives some reputation to both the answerer and yourself.

Collectives™ on Stack Overflow

how to iterate in nested array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related