How can I access nested values in this array of objects with dot notation?

Question

import React, { Component } from 'react';
import axios from 'axios';

class Home extends Component {

  state = {
    responses: []
  }

  componentDidMount() {
    this.fetchQuestionAnswers();
  }

  fetchQuestionAnswers = () => {
   if (this.state.activeSupervisionId) {
    axios.get('/question/response/' + this.state.activeSupervisionId).then(res => {
     this.setState({ responses: res.data.data || [] });
     console.log(this.state.responses[0].value)
// dot notation work here inside the function
    }).catch(err => console.error(err));
   }
  }

  render() {
     console.log(this.state.responses[0].value)
// dot notation not working here under render function but the result of // console.log(this.state.responses[0]) is printed
    return (
    )
  }
}
export default Home;

I fetch a data from an API that was sent as array of objects. So lets say I set the state of responses: res.data.data. The result of responses console appear as described below.

var responses = [0: {…}, 1: {…}, 2: {…}, 3: {…}, 4: {…},...]

Index Value

I will use the 0 index object as an example of what I am trying to achieve. I have searched other answers but couldn't figure it out.

0: {
  id: 5,
  questionId: 1,
  score: "0",
  text: "Are there any others",
  value: {
    designations: {
      CCO: { no: "3" },
      CDD: { no: "1" },
      DSNO: { no: "1" }
    },
    reaportedStaff: [ "DSNO", "CCO", "CDD" ]
    staffLivingInQuarter: "yes"
    totalReaportedStaff: 5
  }
}

I want to know how I can access the value of properties inside the objects in the array with dot notation or other method i.e id, score, text, CCO no?

Please note that I have tried responses[0].value and it printed TypeError: Cannot read properties of undefined (reading 'value')

And with this : `arr[0]['value']['designations']['CCO']['no']` it's not printed result too ? — Rocket, Nov 07 '21 at 19:17
@Rocket I got the error ```TypeError: Cannot read properties of undefined (reading 'value')``` — Wacademy, Nov 07 '21 at 19:21
@about14sheep it printed error ```TypeError: Cannot read properties of undefined (reading 'value')``` — Wacademy, Nov 07 '21 at 19:22
Also on an important technical note: that's not JSON, that's just "an array". In JS, JSON is only ever string data, the rest is "just JS itself". — Mike 'Pomax' Kamermans, Nov 07 '21 at 19:22
After your request, when do you trying to access to your response ? Do you wait the result before trying access it ? And of course, are your sur they are result at this index like say @about14sheep — Rocket, Nov 07 '21 at 19:25
I added a comment in the question maybe it will help clarify the problem — Wacademy, Nov 07 '21 at 19:35
After your axios get, on `then` what is print on console.log (this.state) ? are you sure the this dont use the axios context ? Try to get your response like this : `.then((res) => {})` rather thank `.then( res => {})`. And see if it's better — Rocket, Nov 07 '21 at 19:43
_I will get the same value like I got in the fetch function._ what is the value you get from the fetch function? and what is the render function? But once again that error means there is nothing at the 0 index in that array — about14sheep, Nov 07 '21 at 19:48
@about14sheep I edited the question with more info. After I fetch the data, dot notation works fine. But when I console log under render function I can only get the index object like ```this.state.responses[0]``` but I cant get any value beyond that. — Wacademy, Nov 07 '21 at 20:01
@Rocket I tried ```.then((res) => {})``` but the error persist. Thanks — Wacademy, Nov 07 '21 at 20:02
With your edit, i can suppose your request is not finish when you do your render. It's for that you have `undefined`. Make your request synchronus if you need your request was finish on the render — Rocket, Nov 07 '21 at 20:05
ah see now this a react question, please be more specific when asking questions on stackoverflow so we can help you. You had us looking in the wrong direction. Have a look at this: https://reactjs.org/docs/react-component.html#the-component-lifecycle — about14sheep, Nov 07 '21 at 20:10

How can I access nested values in this array of objects with dot notation?

0 Answers0