我正在将API数据作为我正在创建的ReactJS应用程序的内容,我想知道在数组中迭代嵌套数组的最佳方法。这是有问题的JSON:
{
"code": 200,
"status": "Ok",
"copyright": "© 2015 MARVEL",
"attributionText": "Data provided by Marvel. © 2015 MARVEL",
"attributionHTML": "<a href=\"http://marvel.com\">Data provided by Marvel. © 2015 MARVEL</a>",
"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"
}
]
}
]
}
这是我的MarvelBios.jsx文件,其中包含数据呈现:
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>
)
}
});
我能够成功从JSON中提取我的第一个数据数组,即results
(包含字符名称,描述和缩略图)。
我想要做的是在主items
数组下引用名为results
的子数组,但是我在构造正确的代码时遇到了困难。例如,我尝试在现有var items = result.series.items.map(function(item, i)
下嵌套创建var results
,但返回了未定义的内容。
感谢您的帮助。
答案 0 :(得分:1)
也许这样的事情。
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>
)
}
});
&#13;