迭代 api 中的嵌套数组 - ReactJS

Question

我正在提取 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（包含字符名称、描述和缩略图）。

然后我想做的是在主results 数组下引用名为items 的子数组，但我很难构建正确的代码。例如，我尝试创建一个嵌套在现有 var results 下的 var items = result.series.items.map(function(item, i)，但返回的是未定义的。

感谢您的帮助。

Answer 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>
    )
  }
});