javascript - Unable to render JSON data in react component -
i trying parse json ajax call display table using react datatable component. problem facing when try put data in state variable using set state method, not able access required data. json looks like:
{ "search": [ { "title": "star wars: episode iv - new hope", "year": "1977", "imdbid": "tt0076759", "type": "movie", "poster": "http://ia.media-imdb.com/images/m/mv5botiymdy2ngqtogjjni00otk4lwfhmdgtyme3m2niyzm0ytvmxkeyxkfqcgdeqxvyntu1ntcwotk@._v1_sx300.jpg" }, { "title": "star wars: episode v - empire strikes back", "year": "1980", "imdbid": "tt0080684", "type": "movie", "poster": "http://ia.media-imdb.com/images/m/mv5bmje2mzqwmtgxn15bml5banbnxkftztcwmdqznjk2oq@@._v1_sx300.jpg" }, { "title": "star wars: episode vi - return of jedi", "year": "1983", "imdbid": "tt0086190", "type": "movie", "poster": "http://ia.media-imdb.com/images/m/mv5bmtq0mzi1njywof5bml5banbnxkftztgwodu3ndu2mte@._v1._cr93,97,1209,1861_sx89_al_.jpg_v1_sx300.jpg" }, { "title": "star wars: force awakens", "year": "2015", "imdbid": "tt2488496", "type": "movie", "poster": "http://ia.media-imdb.com/images/m/mv5botazodezndazml5bml5banbnxkftztgwmdu1mtgznze@._v1_sx300.jpg" }, { "title": "star wars: episode - phantom menace", "year": "1999", "imdbid": "tt0120915", "type": "movie", "poster": "http://ia.media-imdb.com/images/m/mv5bmtq4njewnda2nl5bml5banbnxkftztcwnduyndqznw@@._v1_sx300.jpg" }, { "title": "star wars: episode iii - revenge of sith", "year": "2005", "imdbid": "tt0121766", "type": "movie", "poster": "http://ia.media-imdb.com/images/m/mv5bntc4mtc3ntq5of5bml5banbnxkftztcwotg0nji4na@@._v1_sx300.jpg" }, { "title": "star trek", "year": "2009", "imdbid": "tt0796366", "type": "movie", "poster": "http://ia.media-imdb.com/images/m/mv5bmje5ndq5ote4ml5bml5banbnxkftztcwote3ndizmw@@._v1_sx300.jpg" }, { "title": "star wars: episode ii - attack of clones", "year": "2002", "imdbid": "tt0121765", "type": "movie", "poster": "http://ia.media-imdb.com/images/m/mv5bmty5mji5ntiwnl5bml5banbnxkftztywmtm1njg2._v1_sx300.jpg" }, { "title": "star trek darkness", "year": "2013", "imdbid": "tt1408101", "type": "movie", "poster": "http://ia.media-imdb.com/images/m/mv5bmtk2nzczotgxnf5bml5banbnxkftztcwodq5odczoq@@._v1_sx300.jpg" }, { "title": "star trek: first contact", "year": "1996", "imdbid": "tt0117731", "type": "movie", "poster": "http://ia.media-imdb.com/images/m/mv5bmtg4otywody4mf5bml5banbnxkftztgwntg2njiymde@._v1_sx300.jpg" } ], "totalresults": "2846", "response": "true" } "data.search" should gives me array of objects. not being sent data table component. instead, if try somehow display "data.totalresults" works because throws single value. or if same array of objects sent thru local variable, works. please me new react , taking lot of time! appreciated in advance!
<body> <div id="container"></div> <script type="text/babel"> var tablecolumns = [ { 'title': 'title', 'prop': 'title' }, { 'title': 'year', 'prop': 'year' } ]; var destination = document.queryselector("#container"); var buildrules = react.createclass({ getinitialstate: function() { return {data: {}}; }, loaddata: function(){ $.ajax({ url: 'http://www.omdbapi.com/?s=star&r=json&plot=short', success: function(data){ console.log(data); this.setstate({data: data}); console.log(this.state.data.search); }.bind(this) }) }, componentwillmount: function(){ this.loaddata(); }, componentdidmount:function(){ }, render:function(){ return ( react.createelement(reactdatacomponents.datatable, { keys: 'id', columns: this.props.col, initialdata: this.state.data.search, //here, "data.search" should give array of objects facing issue. if same data fed using local variable, works! initialpagelength: 5, initialsortby: { prop: 'title', order: 'descending'} }) ); } }); reactdom.render( <div id="blah"> <buildrules col = {tablecolumns} /> </div>, destination ); </script> </body>
here solution: https://jsfiddle.net/lustoykov/fpfuuchj/1/
there few things have missed:
- when log result first time,
undefinedbecause perform async request fetch data. why need check if present , render it. - also log
console.log("this.state.data.search"+ this.state.data.search). should be:console.log("this.state.data.search", this.state.data.search) - once data there, can see search result
- (optional) please bear in mind ajax requests performed in
componentdidmountsuggested in react's docu
if don't want display data, pass datatable component, instead of
const searches = this.state.data.search ? this.state.data.search.map((searchresult, index) => <h1 key={index}> {searchresult.title} </h1>) : "" simply have
const searches = this.state.data.search ? this.state.data.search.map(searchresult => <datatable tablecolumns={searchresult} />) : "" this display <datatable /> components once data fetched.
Comments
Post a Comment