In my project, I am using a MEAN stack and Socket.io to retrieve images from the real-time Instagram API. The current setup is functioning well, but now I want to store image data in a MongoDB database to maintain a record of images based on locations, rather than just displaying the most recent photos.
Below is the code snippets that are currently working:
Node server-side code for handling new photo updates from Instagram API and emitting an event to Angular controller:
// Code to handle new posts from Instagram
app.post('/callback', function(req, res) {
var data = req.body;
// Extract object_id as geo_id from each subscription and send it to the client side
data.forEach(function(data) {
var geo_id = data.object_id;
sendUpdate(geo_id);
});
res.end();
});
// Emit the URL with the geo_id to the client side for AJAX call
function sendUpdate(geo_id) {
io.sockets.emit('newImage', { geo_id: geo_id });
}
Angular controller code for receiving 'newImage' event:
socket.on('newImage', function(geo_id) {
// Call Instagram API with geo_id parameter
Instagram.get(geo_id).success(function(response) {
instagramSuccess(response.geo_id, response);
});
// Callback function for Instagram API
var instagramSuccess = function(scope,res) {
if (res.meta.code !== 200) {
scope.error = res.meta.error_type + ' | ' + res.meta.error_message;
return;
}
if (res.data.length > 0) {
$scope.items = res.data;
} else {
scope.error = "This location has returned no results";
}
};
});
Angular factory for making calls to Instagram API:
angular.module('InstaFactory', []).factory('Instagram', function($http) {
var base = "https://api.instagram.com/v1";
var client_id = 'MY-CLIENT-ID';
return {
'get': function(geo_id) {
var request = '/geographies/' + geo_id.geo_id + '/media/recent?client_id=' + client_id;
var url = base + request;
var config = {
'params': {
'callback': 'JSON_CALLBACK'
}
};
return $http.jsonp(url, config);
}
};
I also have an Angular Controller that retrieves details of each location from my Stadia MongoDB model. The model includes an empty 'photos' array where I intend to add photo details (URL, username, user profile URL, etc.) every time they are received from Instagram:
angular.module('StadiaFactory', []).factory('Stadia', function($http) {
var base = "http://localhost:6060/api/stadia/";
return {
'get': function(id) {
var request = id;
var url = base + request;
var config = {
'params': {
'callback': 'JSON_CALLBACK'
}
};
return $http.jsonp(url, config);
}
};
});
I am unsure about where to initiate the PUT request to my Stadia API and whether the Node route for my Stadia API is appropriate. Note: My GET route is functioning correctly, but I am facing challenges with the PUT request:
// Add photos to stadium's photos array
app.put('/api/stadia/:stadium_id', function(req, res) {
// Utilize mongoose to retrieve and update stadium
Stadium.findByIdAndUpdate(req.params.stadium_id,
{$push: {"photos": {img: ?, link: ?, username: ?, profile_picture: ?}}},
{safe: true, upsert: true},
function(err, stadium) {
// If there is an error, send the error message
if (err)
res.send(err)
res.jsonp(stadium); // Return updated stadium in JSON format
});
});