Iterating over a nested array in api - ReactJS - arrays

Question

I am pulling API data as content for my ReactJS app i'm creating and i'd like to know the best method to iterate over a nested array within an array. Here's the JSON in question:
{
"code": 200,
"status": "Ok",
"copyright": "© 2015 MARVEL",
"attributionText": "Data provided by Marvel. © 2015 MARVEL",
"attributionHTML": "Data provided by Marvel. © 2015 MARVEL",
"etag": "5341faac8eb2f18f592309355057b1c40375545c",
"data": {
"offset": 0,
"limit": 20,
"total": 1,
"count": 1,
"results": [
{
"id": 1011179,
"name": "Pixie",
"description": "",
"modified": "2011-10-19T10:48:27-0400",
"thumbnail": {
"path": "http://i.annihil.us/u/prod/marvel/i/mg/8/e0/4c002f2d626ee",
"extension": "jpg"
},
"resourceURI": "http://gateway.marvel.com/v1/public/characters/1011179",
"comics": {
"available": 6,
"collectionURI": "http://gateway.marvel.com/v1/public/characters/1011179/comics",
"items": [
{
"resourceURI": "http://gateway.marvel.com/v1/public/comics/39737",
"name": "Magneto: Not a Hero (2011) #1"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/comics/24173",
"name": "Runaways (2008) #10"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/comics/36943",
"name": "Steve Rogers: Super Soldier Annual (2010) #1"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/comics/38083",
"name": "X-Men (2010) #19"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/comics/41118",
"name": "X-Men (2010) #19 (Mc 50th Anniversary Variant)"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/comics/38404",
"name": "X-Men: Second Coming Revelations (Trade Paperback)"
}
],
"returned": 6
},
"series": {
"available": 5,
"collectionURI": "http://gateway.marvel.com/v1/public/characters/1011179/series",
"items": [
{
"resourceURI": "http://gateway.marvel.com/v1/public/series/14683",
"name": "Magneto: Not a Hero (2011 - 2012)"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/series/5338",
"name": "Runaways (2008 - 2009)"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/series/13192",
"name": "Steve Rogers: Super Soldier Annual (2010 - Present)"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/series/9906",
"name": "X-Men (2010 - 2013)"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/series/13832",
"name": "X-Men: Second Coming Revelations (2011 - Present)"
}
],
"returned": 5
},
"stories": {
"available": 6,
"collectionURI": "http://gateway.marvel.com/v1/public/characters/1011179/stories",
"items": [
{
"resourceURI": "http://gateway.marvel.com/v1/public/stories/53571",
"name": "Interior #53571",
"type": "interiorStory"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/stories/81928",
"name": "Steve Rogers: Super Soldier Annual (2010) #1",
"type": "interiorStory"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/stories/90198",
"name": "Magneto: Not a Hero (2011) #1 - Int",
"type": "interiorStory"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/stories/90479",
"name": "X-MEN: SECOND COMING REVELATIONS TPB",
"type": "cover"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/stories/93085",
"name": "X-Men (2010) #19, Mc 50th Anniversary Variant",
"type": "cover"
},
{
"resourceURI": "http://gateway.marvel.com/v1/public/stories/94024",
"name": "X-Men #19 Interior",
"type": "interiorStory"
}
],
"returned": 6
},
"events": {
"available": 0,
"collectionURI": "http://gateway.marvel.com/v1/public/characters/1011179/events",
"items": [],
"returned": 0
},
"urls": [
{
"type": "detail",
"url": "http://marvel.com/characters/1758/pixie?utm_campaign=apiRef&utm_source=86e8919c441293aef435c128e5b5c53a"
},
{
"type": "wiki",
"url": "http://marvel.com/universe/Pixie_%28Eternal%29?utm_campaign=apiRef&utm_source=86e8919c441293aef435c128e5b5c53a"
},
{
"type": "comiclink",
"url": "http://marvel.com/comics/characters/1011179/pixie?utm_campaign=apiRef&utm_source=86e8919c441293aef435c128e5b5c53a"
}
]
}
]
}
and here's my MarvelBios.jsx file that contains the render of the data:
var React = require('react');
module.exports = React.createClass({
propTypes: {
username: React.PropTypes.string.isRequired,
bios: React.PropTypes.object.isRequired
// bios is the entireity of data from the JSON pulled in by Axios for the user inputted character name ("username")
},
render: function() {
var results = this.props.bios.data.results.map(function(result, index) {
return (
<div className="bios" key={index}>
<img src={result.thumbnail.path + "/landscape_xlarge." + result.thumbnail.extension} />
{result.name && <p>{result.name}</p>}
{result.description && <small> {result.description}</small>}
<p></p>
</div>
);
});
return (
<div>
{results}
</div>
)
}
});
I am able to successfully pull in the my first array of data from the JSON, which is results (contains character name, description and thumbnail image).
What i'd like to do is then reference the sub-array called items under that main results array, but i'm having difficulty constructing the proper code. For example I tried creating a var items = result.series.items.map(function(item, i) nested under the existing var results but that returned an undefined.
Thanks for any help.

Answer 1

Something like this perhaps.
module.exports = React.createClass({
propTypes: {
username: React.PropTypes.string.isRequired,
bios: React.PropTypes.object.isRequired
// bios is the entireity of data from the JSON pulled in by Axios for the user inputted character name ("username")
},
render: function() {
var results = this.props.bios.data.results.map(function(result, index) {
var items = results.comics.items.map(function(item) {
return <div>{item}</div>;
});
return (
<div className="bios" key={index}>
<img src={result.thumbnail.path + "/landscape_xlarge." + result.thumbnail.extension} />
{result.name && <p>{result.name}</p>}
{result.description && <small> {result.description}</small>}
<p>{items}</p>
</div>
);
});
return (
<div>
{results}
</div>
)
}
});