ReactJS Calling a JSON API

Question

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

vistajess · Accepted Answer · 2016-11-22 05:36:30Z

1

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){

   })   
})

answered Nov 22, 2016 at 5:36

vistajess

6791 gold badge9 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

abrahamlinkedin Over a year ago

So this works. However, I seem only to be able to call [0]. I get an article of undefined error if I replace this with [1].

Bruce Xu · Accepted Answer · 2016-11-22 05:24:38Z

1

Cannot read map of undefined error is cause of the this.state.fulldata.forthem.articles.map() the articles is undefined.

And I wonder if GitHub.io support cross-domain? If not, this code cannot be working because getJSON cannot get the data from your gist.

answered Nov 22, 2016 at 5:24

Bruce Xu

3631 gold badge4 silver badges11 bronze badges

1 Comment

abrahamlinkedin Over a year ago

I am able to make API calls from my Github. The only problem is, as you mentioned, the articles is undefined. And I am not sure how to define it in React using the map function. EDIT: Got it!

Collectives™ on Stack Overflow

ReactJS Calling a JSON API

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related