how to foreach/map array inside objects on react hooks?

Question

I have a json from an API like this

"data": {
    "total_question": 2,
    "correct_answer": "1/2",
    "correct_percentage": 50,
    "details": [
        {
            "question_id": 1,
            "question": "test questioner 1",
            "choice": "choice 1.1",
            "result": "correct",
            "percentage_choice": 100
        },
        {
            "question_id": 2,
            "question": "test questioner 2",
            "choice": "choise 2.3",
            "result": "incorrect",
            "percentage_choice": 100
        }
    ]
}

then I will enter the response of the API into a state

const [data, setData] = useState({})

this is a fetch for data

const fetchResult = () => {
    api.get(`api/questionnaire/getResult?voteId=${id}`)
      .then(res => {
        const { data: listResult } = res.data
        setLoading(false)
        setData(listResult)
      })
      .catch(err => console.log('error'))
  }
  useEffect(() => {
    fetchResult()
  }, [])

this is the result of the response API being displayed

<Card>
  <Card.Body>
    {Object.keys(data.details).map(item => {
      return (
        <Col key={item.question_id} xs={12} className='mb-3'>
          <h5>{item.question}</h5>
          <ProgressBar 
            variant='danger' 
            now={item.percentage_choice} 
            label={`${item.percentage_choice}%`} 
          />
        </Col>
      )
    })}
   <Col xs={12}>
     <h5>Total question: {data.total_question}</h5>
   </Col>
  </Card.Body>
</Card>

how to get details and map it? I always get the following message: TypeError: Cannot convert undefined or null to object

Did you check response from server? Is it setting right in data? — Vagan M.
– Vagan M., Commented Jul 14, 2020 at 10:56
If api.get returns a promise of the above JS object, shouldn't it be const listResult = res.data? Otherwise you get res.data.data — Narigo
– Narigo, Commented Jul 14, 2020 at 11:01

aravind_reddy · Accepted Answer · 2020-07-14 11:00:47Z

1

you need to do check if the object/array you are trying to access is valid or not first then you can directly map over the array(data.details)... something like this:

{data.details && data.details.map(item => {
  return (
    <Col key={item.question_id} xs={12} className='mb-3'>
      <h5>{item.question}</h5>
      <ProgressBar 
        variant='danger' 
        now={item.percentage_choice} 
        label={`${item.percentage_choice}%`} 
      />
    </Col>
  )
})}

answered Jul 14, 2020 at 11:00

aravind_reddy

5,4964 gold badges28 silver badges41 bronze badges

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

Comments

Denys Oliinyk · Accepted Answer · 2020-07-14 11:02:24Z

1

Looks like data.details -> Object.keys(data.details) is already array and you don't need to get keys from it. Try to use map directly data.details.map(....

answered Jul 14, 2020 at 11:02

Denys Oliinyk

1,0842 gold badges13 silver badges28 bronze badges

Collectives™ on Stack Overflow

how to foreach/map array inside objects on react hooks?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related