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

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

感谢您的任何帮助。

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