How to loop an object that is inside an array and is inside an object? React

Question

I am doing my front in react and I am consuming microservices from laravel, there is one that the only thing it does is return a json with a list of countries, but I cannot do a cycle to access the object, I have used map and for, but nothing It works, as the microservice returns a plain text json, I first pass it through JSON.parse to create an object, and that object looks like this:

object after JSON.parse of response microservice

Here is my code of how I request using axios:

class MisDatosEmprendedor extends React.Component {
  constructor(props){
        super(props);
        this.state = {
          country:'',
        }
   }
   async componentDidMount() {
        await axios({
            url: `${countryUrl}`,
            method: 'GET',
        })
        .then(response =>{
            var objson = JSON.parse(response.data);
            this.setState({
                country: objson,
            })
        })
        .catch(error => {
            console.log(error)
            return error;
        });
   }

}

Now I try to use map to loop the render and show all countries in a select, but it tells me this.state.country.countries not defined error

render(){
        return <React.Fragment>
       {this.state.country.countries.map(function(d){
                            return(
                                <option value={d.id}>{d.name}</option>
                            )
                        })}
      </React.Fragment>
    }

Is the image you posted of the response or of the parsed JSON? If it's the response then you should just use JSON.parse(response), not JSON.parse(response.data) — yaakov
– yaakov, Commented Jul 8, 2021 at 19:31
Please post text as text, not as a picture of text. You can use console.log(JSON.stringify(obj, null, 2)) to show a nicely formatted view of an object. Also, mixing async/await with then chaining is a good way to get yourself into trouble. Pick a paradigm and stick with it; i.e. (try { const response = await axios(...); /* do something with response */ } catch (e) { ... }). — Heretic Monkey
– Heretic Monkey, Commented Jul 8, 2021 at 19:45
Does this answer your question? Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference — Heretic Monkey
– Heretic Monkey, Commented Jul 8, 2021 at 19:45

user3875913 · Accepted Answer · 2021-07-08 19:36:10Z

2

I would initialise the state of country as an object like so country: {countries: []} not an empty string. As your component is already mounted it is reading an empty string, thus you have your error.

answered Jul 8, 2021 at 19:36

user3875913

2522 silver badges11 bronze badges

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

Comments

hjrshng · Accepted Answer · 2021-07-08 19:35:02Z

1

Your initial state does not match the data from the api. Before the request succeeds, it will throw an error. Try:

  constructor(props){
        super(props);
        this.state = {
          country: { countries: [] },
        }
   }

answered Jul 8, 2021 at 19:35

hjrshng

1,8553 gold badges19 silver badges35 bronze badges

Collectives™ on Stack Overflow

How to loop an object that is inside an array and is inside an object? React

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related