react - json from url not loading
Ad
I have the following code that is returning a blank page and I don't know why. There's no error but looking in the sources I can see the API data is not loading from the URL. -
var WGListList = React.createClass({
render: function() {
var wglistNodes = this.props.data.map(function(wglist) {
return (
<WGList name={wglist.name} key={wglist.id} />
);
});
return (
<div className="wglistList">
{wglistNodes}
</div>
);
}
});
var App = React.createClass({
loadWGListsFromServer: function() {
$.ajax({
url: "http://server/api/widgetlists/?format=json",
pollInterval: 2000,
dataType: 'json',
cache: false,
success: function(data) {
this.setState({data: data});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.url, status, err.toString());
}.bind(this)
});
},
getInitialState: function() {
return {data: []};
},
componentDidMount: function() {
this.loadWGListsFromServer();
setInterval(this.loadWGListsFromServer, this.pollInterval);
},
render: function() {
return (
<div className="wglistBox">
<h1>Widget Lists</h1>
<WGListList data={this.state.data} />
</div>
);
}
});
var WGList = React.createClass({
render: function() {
return (
<div className="wglist">
<h2 className="wglistName">
{this.props.name}
</h2>
</div>
);
}
});
ReactDOM.render(
<App />,
document.getElementById('content')
);
If I change
url: this.props.url,
pollInterval: this props.pollInterval
and do this -
ReactDOM.render(
<App url="http://server/api/widgetlists/?format=json" pollInterval={2000} />,
document.getElementById('content')
);
it works.
hmmm... still new to javascript. Issue seems to be how I'm naming components. If I change App
back to WGListBox
in both instances which is similar to the tutorial it works. Those are the only two references to that line though, where else is it persisting?
Ad
Answer
Ad
ok so learned the issue is that apparently javascript has issues with beginning variables with lowercass. I actually had one named wgApp
later in my code snipped and that was what was breaking it. I renamed to WGApp
and worked fine.
Ad
source: stackoverflow.com
Related Questions
Ad
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad