how do I map over a nested array of objects which contains a nested array of objects in react, redux

Question

I have a mongodb document that I'm pulling with an axios ajax call. The document has an array of objects which also contains a nested array of objects. Every object has a mongo id assigned to it. The top most data is displayed in the corresponding top most Presentation component, but subsequent arrays of objects are not displayed in their relative Presentation components. The error I am getting is. "TypeError: this.props.card.rdfts is undefined", yet it's non array siblings are displayed. Yet, when I look in react dev tools and redux dev tools the array of objects is infact there and as an array of objects which contains an array of objects.

I've searched countless stackoverflow artiles as well as countless github articles. I've tried many different approaches but nothing seems to work.

My mongodb docuent is...

{
"_id" : ObjectId("58d93a23a62fdfa37438b4ca"),
"url" : "/api/Rationale/Restraint/Model/1",
"type" : "body",
"title" : "title",
"vid" : {
    "_id" : ObjectId("58d93a23a62fdfa37438b4c3"),
    "type" : "video",
    "src" : "somesrc",
    "border" : "1",
    "width" : "400",
    "height" : "200",
    "frameborder" : "0",
    "allowfullscreen" : false
},
"topic" : "Topic?",
"rdfts" : [ 
    {
        "_id" : ObjectId("58d93a23a62fdfa37438b4c4"),
        "rdft" : "ReasonDetailFactTransition",
        "explainations" : [ 
            {
                "_id" : ObjectId("58d93a23a62fdfa37438b4c5"),
                "explaination" : "Explaination1"
            }, 
            {
                "_id" : ObjectId("58d93a23a62fdfa37438b4c6"),
                "explaination" : "Explaination2"
            }
        ]
    }, 
    {
        "_id" : ObjectId("58d93a23a62fdfa37438b4c7"),
        "rdft" : "Reason Detail Fact Transition 2",
        "explainations" : [ 
            {
                "_id" : ObjectId("58d93a23a62fdfa37438b4c8"),
                "explaination" : "Explaination1"
            }, 
            {
                "_id" : ObjectId("58d93a23a62fdfa37438b4c9"),
                "explaination" : "Explaination2"
            }
        ]
    }
],
"conclusion" : "Conclusion of Card"

}

I'm making my ajax call from componentwillmount

componentWillMount() {
    console.log("componentDidMount")
    let myURI = ''; {
        let { api, page, section, subsection, card } = this.props.match.params;
        myURI = `/${api}/${page}/${section}/${subsection}/${card}`;
    }
    console.log("json call 1")
    this.props.dispatch(asyncSetCard(myURI));

}

This is my thunk that doesn't seem to be halting flow of control.

asyncSetCard(uri) {
  return dispatch => {

    return axios.get(uri).then(response => {

      dispatch(setCardSuccess(response.data[0]));

    }).catch(error => {

      throw (error);
    });
  }
}

So the ajax call seems to work but when I try to render nested arrays of objects with other nested arrays of objects I get the above TypeError.

This happens in the render function

render() {
    return (
        <div>
            <h2>Title: {this.props.card.title}</h2>
            <h3>Topic: {this.props.card.topic}</h3>
                       {this.props.card.rdfts.map(RDFTs)}
            <h3>Conclusion: {this.props.card.conclusion}</h3>
        </div>
    );
}

If I delete {this.props.card.rdfts.map(RDFTs)} then the first level of my documents is displayed. If I put this back in, then subsequent nested arrays of documents do not get displayed and I get the following error. "TypeError: this.props.card.rdfts is undefined"

I've tried to work with 1 level of array of objects at a time but that doesn't seem to work ether.

Also, It doesn't seem that my axios promise is stopping halting flow of control. I originally wanted for the promise to be resolved then render but it seems that the then just falls through and render is called immediately. I wonder if the array of objects isn't instantiated in time or what but it doesn't seem to work.

If you take a look at my console you will see that I'm getting there error before the promise is resolved, but that shouldn't matter since react is reading straight from the state tree. Once the state tree is updated, then react is supposed to update. right?

15:40:24.978 GET mybuldleyadabundle.js [HTTP/1.1 200 OK 117ms]

15:40:26.855 componentDidMount CardCC.jsx:42:13

15:40:26.867 TypeError: this.props.card.rdfts is undefined[Learn More] ...

15:40:27.327 GET XHR myhttpurl.herokuapp.com/api/Rationale/Restraint/Model/1 [HTTP/1.1 200 OK 143ms]

15:40:27.800 GET XHR mylocalhost:3001/sockjs-node/info [HTTP/1.1 200 OK 2ms]

David Gonzales David Gonzales · Accepted Answer · 2017-03-31T05:38:21

Dan Abramov already figured this out. https://github.com/paularmstrong/normalizr. Normalizer is what I needed. :) Thanks Dan.Also had help from Cory.

how do I map over a nested array of objects which contains a nested array of objects in react, redux

1 Answers