abrahamlinkedin abrahamlinkedin - 13 days ago 9
React JSX Question

ReactJS Calling a JSON API

In my JSON file I have a few layers of data that I would like to call from. My JSON data, as shown in my

getInitState
is organized as
{forthem:[{articles:[]}]}
. You can also view my data at https://emjayweb.github.io/portfolio/scripts/snippets.json.

The first function, where I'm using variable
fakeit
works as expected. However, the second function, where I'm calling
makeit
to access my
articles
data does not work. I get a
Cannot read map of undefined
error.

I have included my full code below for review.

getInitialState:function(){
return {forname: '', forsym: '', fortitle: '', fulldata: {forthem:[ {articles: [] } ]} }
},

componentDidMount:function(){
var self = this;
$.getJSON('https://emjayweb.github.io/portfolio/scripts/snippets.json', function(snowden){
self.setState({fulldata: snowden});
});
},

render:function(){
return (<div id="madeforlist">
<ul>
{this.state.fulldata.forthem.map(function(fakeit, i){
return <li key={i}>
<i className="fa fa-plus-circle" aria-hidden="true"></i>
<span id="forname">{fakeit.therefore}</span>
<span className="pull-right">{fakeit.theresym}</span>
</li>})}
<ul>
{this.state.fulldata.forthem.articles.map(function(makeit, o){
return <li key={o}>{makeit.article}</li>
})}
</ul>
</ul>
</div>);
}

Answer

forthem is an array so literally you need to pass an index to get the array articles

try this.state.fulldata.forthem[0].articles.map()

this.state.fulldata.forthem.map(function(fakeit,i){

   fakeit.articles.map(function(article,j){

   })   
})
Comments