I am trying to make an API call to Yelp in my Node.js app. I saw from here that I should use this code in order to be able to use the Yelp API: https://arian.io/how-to-use-yelps-api-with-node/ . I used that code in my app.js file. Now in order for it to display the results on the browser I know that I have to connect the controller to the view (in my case index.html) and bind the two files with $scope. But I would also have to somehow connect the controller to app.js. The tutorial that I followed on arian.io said:
Now if you call the function request_yelp(params, callback) it will call the callback with these arguments, callback(error, response, body). That's it, now you're ready to take full advantage Yelp's API.
but how or where do I call that function? I assume I'd do it in my controller but I have tried that but it didn't work.
To summarize my issue, if the API call is right and it is where it should be, then my next step is to link that with my controller, once those two are connected, I have to bind html with apiController.js with $scope in order to bring my data results to be displayed in the browser. I know I am missing a lot of things, but I think I have the right idea.
Any help is welcome. Thanks!
My app's tree
>.git
>bower_components
>client
>controllers
-apiControllers (My one and only controller)
>css
>views (This is empty)
app.js
index.html (This is my one and only page/ my app is a one page app)
package.json
>models
>node_modules
app.js (This is where I am trying to make the API call)
<-- ================================================== -->
//This is my app.js file
//Call packages needed
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var mongoose = require('mongoose');
var dotenv = require('dotenv').config();
var oauthSignature = require('oauth-signature');
var n = require('nonce')();
var request = require('request');
var qs = require('querystring');
var _ = require('lodash');
// Function for yelp call
var request_yelp = function(set_parameters, callback) {
var httpMethod = 'GET';
var url = 'http://api.yelp.com/v2/search';
var default_parameters = {
location: 'New+York',
sort: '2'
};
var required_parameters = {
oauth_consumer_key : process.env.yelp_consumer_key,
oauth_token : process.env.yelp_token,
oauth_nonce : n(),
oauth_timestamp : n().toString().substr(0,10),
oauth_signature_method : 'HMAC-SHA1',
oauth_version : '1.0'
};
var parameters = _.assign(default_parameters, set_parameters, required_parameters);
var consumerSecret = process.env.yelp_consumer_secret;
var tokenSecret = process.env.yelp_token_secret;
var signature = oauthSignature.generate(httpMethod, url, parameters, consumerSecret, tokenSecret, { encodeSignature: false});
parameters.oauth_signature = signature;
var paramURL = qs.stringify(parameters);
var apiURL = url+'?'+paramURL;
request(apiURL, function(error, response, body){
return callback(error, response, body);
});
};
app.use(express.static(__dirname+'/client'));
app.get('/', function request_yelp(params, callback){
res.send('This is the main page');
});
app.listen(3000);
console.log('Running on port 3000');
<-- ================================================== -->
<!-- This is index.html. Here I would like to display my YELP responses. I am using Bootstrap
<div class="container-fluid">
<div class="row-fluid">
<!-- <div class="container-fluid"> -->
<!-- <div class="jumbotron"> -->
<div class="row-fluid">
<!-- <div ng-controller="MainCtrl"> -->
<p><date-input name="info.name" message="info.message"></date-input></p>
<div data-ng-repeat="business in businesses">
<!-- <div class="col-lg-offset-1"> -->
<div class="col-lg-2 col-lg-offset-2 col-md-3 col-sm-2 col-xs-6 text-center">
<p>Breakfast</p>
<div class="thumbnail">
<img class="img-responsive img-circle" src="{{business.image_url}}">
<h5>{{business.name}}</h5>
<h5>{{business.rating}}</h5>
<h5>"{{business.snippet_text}}"</h5>
<h5>{{business.categories[0]}}</h5>
<p><a class="btn btn-link btn-sm" href="{{business.url}}">View details »</a></p>
<p><a class="btn btn-xs btn-info" id="breakfast" role="button" onClick="refreshPage()">I don't like this one!</a></p>
</div><!-- End thumbnail -->
</div><!-- End col-md-4 -->
<-- ================================================== -->
// Finally this is my apiController.js. What code do I need here to connect the API call to my view?
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope'function($scope) {
$scope.total = [];
$scope.businesses = [];
}])