Updating documents of mongodb using react nodejs and ajax - ajax

Question

Hii I started practicing react and mongodb with nodejs.
By using react I get the data with the help of nodejs...
Now I am trying to update or delete documents of mongodb with the help of nodejs....
I wrote services for them in nodejs but I am not getting any clue of how to connect it with React.
Plz help me to overcome this problem.
Thanks in advance...

Answer 1

If you go to the react website, and look at their tutorial they have a great example of a ajax call done.
Basically you write your ajax function first so it might look something like this if it is a GET request :
your nodejs code:
//the route we get our users at is allUsers
app.get('/allUsers, function(req, res) {
User.find({}, function(err, userarray) { //we grab all users from our mongo collection, and that array of users is called userarray
res.json(userarray); //we return the json with it
});
});
Now for the react part:
var Users = React.createClass({
getUsers : function() { //we define a function for getting our users
$.ajax({ //call ajax like we would in jquery
url: '/allUsers', //this is the url/route we stored our users on
dataType: 'json',
success: function(data) { //if we get a Success for our http get then..
this.setState({user:data}); //set the state of our user array to whatever the url returned, in this case the json with all our users
}.bind(this),
error: function(xhr, status, err) { //error logging and err tells us some idea what to debug if something went wrong.
console.log("error");
console.error(this.props.url,status, err.toString());
}.bind(this)
});
},
getInitialState: function() { //setting our initial state for our user array we want to use in our react code
return {
users: [], //initialize it empty, or with whatever you want
}
},
componentDidMount : function() {
this.getUsers(); //we are invoking our getUsers function here, therefore performing the ajax call
},
render : function() {
return(
//do what we want to do with our array here I guess!
<div>
<PrintArray users = {this.state.users} />
</div>
)
}
});
//Our new Class called Printarray
var PrintArray = React.createClass({
render : function() {
//Psuedocode
return(
ul {
this.props.users.map(function(user){ //we are mapping all our users to a list, this.props.users is inheritance what we passed down from our Users class
return (
<li key = user.id> user.name </li>
)
})
)
}
</ul>
});
And then finally just call our main class,
React.render(<Users />,
document.getElementById(domnNode)); //your div's id goes here
I commented out the code, if you have anymore questions feel free to ask! I don't know if you wanted to do a post method either, but its similar. You just change the GET to a POST, and instead of the function having no parameters, you most likely want a parameter for it, so it might be something like :
sendNewUser : function(data) {
//do ajax post stuff here
}
and in render:
render : function(){
sendNewUser(blah);
}
except you would probably have a form or something or even another class that deals with adding a new user. The question seemed really broad so I just gave a general overview of how I would do it!