Menu
Im trying to display any data from an ajax request, done inside react.js. so far no joy....
its trying to pull data from a test web API, JQuery is installed, although not necessary, i have looked at alternatives, but struggled so far to implement them.
For the request i am trying two things, to bind the data by this and with an append method from Jquery, both don't work. Everything else renders and the console is not spitting out any errors.
I am trying to work towards a generic function that can easily be ported over for react-native, but im stuck even at this JQuery implementation.
var url = 'https://demo2697834.mockable.io/movies';
//main logic
var GetStuff= React.createClass({
getInitialState: function() {
return {
entries: []
};
},
componentDidMount: function() {
$.ajax({
url: 'https://demo2697834.mockable.io/movies',
dataType: 'json',
cache: false,
success: function(data) {
this.setState({entries: data});
$('.test').append(data);
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
render: function() {
return (
<div>{this.state.entries}</div>
);
}
});
//markup
<body style={MainStyles.alldivs}>
<Header />
<GetStuff/>
<div class='test'></div>
{this.props.children}
<Footer />
</body>
Update 1
so i changed the properties to fit the entries declaration. No change, and i tried to pass in the props URL parameter, but no change either. I have also removed the old school JQuery append, im 100% trying to get on board with react, shame its not an easy segway transition.
Do i need to change anything in the server config? i am using express?
Update 2
It' seems the componentDidMount function is not calling at all, to save confusion i will post my full code.
import React from 'react';
import ReactDom from 'react-dom';
import $ from "min-jquery";
import Header from './header';
import Footer from './footer';
//AJAX request
var GetStuff= React.createClass({
getInitialState: function() {
return {
entries: []
};
},
componentDidMount: function() {
$.ajax({
url: 'https://demo2697834.mockable.io/movies',
dataType: 'json',
cache: false,
success: function(data) {
this.setState({entries: data});
console.log('success');
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
console.log('fail');
}.bind(this)
});
},
render: function() {
return (
<div> HERE:
{this.state.entries}
</div>
);
}
});
// Stylesheet stuff is here, not important for this post.
//Render
var MasterLayout = React.createClass({
render: function(){
return(
<html lang="en">
<head>
<title>{this.props.name}</title>
</head>
<body style={MainStyles.alldivs}>
<Header />
<GetStuff />
{this.props.children}
<Footer />
</body>
</html>
)
}
});
// no idea if this is the correct setup, again docs are lacking on the real use of this.
if(typeof window !== 'undefined') {
ReactDom.reder(<MasterLayout />, document.getElementByID("content"));
}
module.exports = MasterLayout;
362
You can use any AJAX library you like with React. Some popular ones are Axios, jQuery AJAX, and the browser built-in window.
APIs are used for fetching data from the server and using AJAX and API we call data asynchronously and show it in our HTML. You can make API requests by using browser build in fetch function or third party libraries like Axios.
In this method, we initiate the AJAX request using XMLHttpRequest . We use the GET method and https://programming-quotes-api.herokuapp.com/quotes/page/1 as the endpoint which returns a JSON output of first page quotes. readystatechange handler is called when the readyState of the request changes.
Well from what I can see is that you're not loading any URL, take this:
url: this.props.url,
You've not assigned any props called url. You've only assigned a variable named url at the top of your file.
So what you can do is add something along the lines of this:
<GetStuff url="https://demo2697834.mockable.io/movies" />
Also I noticed you want to port this function over to react-native. I wouldn't use ajax for that. Look into the fetch method...It's much the same as ajax and it's what react native uses by default. https://facebook.github.io/react-native/docs/network.html
Your request would look something like this:
fetch(this.props.url, {
method: 'GET',
headers: {
'Accept': 'application/json',
},
}).then (function (response) {return response.json()})
.then(function (json) {/* Here is your json */})
.catch(function (error) {/*Handle error*/});
Hmmm...it seems like you aren't able to access the props. Try console.log this.props inside your componentWillMount. But I think I know the reasoning behind this.props.url not working inside your ajax function.
this. inside the ajax function refers to the ajax this, and not the react this.
What you could do is bind this to your ajax function or assign this.props.url to a variable outside the ajax function (this is what I would do). Examples:
componentDidMount: function() {
var url = this.props.url;
$.ajax({
url: url,
BTW, checkout this question for more details: React tutorial- why binding this in ajax call
I noticed you're using plain react with no typescript or architecture such as redux. I suggest you look into using babel with es6 and redux (it handles everything to do with the apps state, it's a must! It's a flux implementation).
I haven't used plain react in a while and you might have to set propTypes and then assign the props in your getInitialState function.
propTypes: {
url: React.PropTypes.string,
},
getInitialState: function() {
return {
url: this.props.url,
};
}
You can then go and access the url value using this.state.url.
138
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
