Mapping nested data object within an array

Question

I have the following data from JSON that I need to render in the front end of my application:

JSON in Redux Slice

{
    "documentGenerated": [
        {
            "documents": 
                {
                    "documentName": "string",
                    "documentStoreId": {{faker 'random.number'}},
                    "documentTitle": "string"
                }
            ,
            "groupName": "string",
            "groupId": {{faker 'random.number'}}
        }
    ],
}

My console log returns the data correctly from my redux slice which I import into my component, however, when I try to map the data it returns the following error:

Error

TypeError: e.documents.map is not a function at line 63

which corresponds to this line of code in the component:

docGenerated.documents.map((document, documentStoreId) => (

Finally, here is how I am mapping the data within the component:

Component

 const documentGenerated = useSelector(selectDocumentGenerated);

 <Card
                type="default"
                title={(
                  <div>
                    {documentGenerated.map((docGenerated) =>
                      docGenerated.documents.map((document) => (
                        <div>
                          <p key={{ documentStoreId }}>{document.documentName}</p>
                        </div>
                      )),
                    )}
                  </div>
                )}
              />

I'm not sure exactly what I am doing wrong, but I took a look at this example from S/O: React - how to map nested object values? however, I keep running into the same error. I believe that I'm not mapping the documents object correctly within the JSON. Any help in the right direction is greatly appreciated.

Apparently your documents isn't an array... – huan feng Oct 26 '21 at 14:32 — huan feng, Oct 26 '21 at 14:32

score 0 · Answer 1 · answered Oct 26 '21 at 14:29

Your code docGenerated.documents.map(...) looks good, it doesn't seem to be the problem.

It might be you're missing the [ ] around documents in your sample redux state slice:

"documents": 
  {
    "documentName": "string",
    "documentStoreId": {{faker 'random.number'}},
    "documentTitle": "string"
  },

If that's the case you can't .map on documents because it's an Object and not an Array.

Mapping nested data object within an array

1 Answers1