Develop Reference

Why is $httpProvider.interceptors returning an `undefined` value

I've created a basic AngularJS app that consumes Yelp's API and am having trouble using $httpProvider.interceptors to parse my response.
Here is my app:
var app = angular.module("restaurantList", []);
My yelpAPI service (not pictured) authenticates my API request and generates a HTTP request. I then output the data received to the Web Console like so:
app.controller("mainCtrl", ["$scope", "yelpAPI", function ($scope, yelpAPI) {
$scope.restaurants = [];
yelpAPI.get(function (data) {
$scope.restaurant = data;
console.log($scope.restaurant);
});
}]);
Here is data from my request:
Object {region: Object, total: 37, businesses: Array[20]}
I want the array located in the businesses property. So, I figured it would be a good idea to use $httpProvider.interceptors to parse the objects found, in the Object.businesses array.
Here is what $httpProvider.interceptors looked like, when I made my initial request:
app.config(function ($httpProvider) {
$httpProvider.interceptors.push(function () {
return {
response: function (response) {
return response;
}
}
});
});
Here is what $httpProvider.interceptors looks like now:
app.config(function($httpProvider) {
$httpProvider.interceptors.push(function() {
return {
response: function(response) {
var old_response = response.businesses,
new_response = [];
for (var i = 0; i < old_response.length; i++) {
var obj = old_response[i],
new_obj = {
restaurant_name: obj.name,
phone_number: obj.display_phone,
yelp_rating: obj.rating,
reservation_url: obj.reservation_url
};
new_response.push(new_obj);
}
return new_response;
}
}
});
});
Now, I'm receiving an error that says TypeError: Cannot read property 'businesses' of undefined. Is there something I'm overlooking?
EDIT #1
I used console.log(response) inside the interceptor to print my response and found that response.businesses should actually be response.data.businesses. Which resolves my error but now my $http call returns undefined. Any idea what my new problem could be?
EDIT #2
app.factory("yelpAPI", function($http, nounce) {
return {
get: function(callback) {
var method = "GET",
url = "http://api.yelp.com/v2/search";
var params = {
callback: "angular.callbacks._0",
oauth_consumer_key: "my_oauth_consumer_key",
oauth_token: "my_oauth_token",
oauth_signature_method: "HMAC-SHA1",
oauth_timestamp: new Date().getTime(),
oauth_nonce: nounce.generate(),
term: "American",
sort: 2,
limit: 20,
radius_filter: 4000,
deals_filter: true,
actionlinks: true
};
var consumerSecret = "my_consumer_secret",
tokenSecret = "my_token_secret",
signature = oauthSignature.generate(method, url, params, consumerSecret, tokenSecret, {
encodeSignature: false
});
params["oauth_signature"] = signature;
$http.jsonp(url, {
params: params
}).success(callback);
}
}
});

In return angular wait object with {data : }:
app.config(function($httpProvider) {
$httpProvider.interceptors.push(function() {
return {
response: function(res) {
var old_response = res.businesses,
new_response = [];
for (var i = 0; i < old_response.length; i++) {
var obj = old_response[i],
new_obj = {
restaurant_name: obj.name,
phone_number: obj.display_phone,
yelp_rating: obj.rating,
reservation_url: obj.reservation_url
};
new_response.push(new_obj);
}
return {data : new_response};
}
}
});
});
Return as {data : new_response}

Emir helped me resolve this issue but essentially, whenever you use $httpProvider.interceptors you have to update response.data and return the entire response object (i.e. not just a new array, as I did) because $http selects the data property for you.

Implement search effectively in Backbone.js

I am trying to perform a search on my current collection and if the results aren't retrieved i am trying to query my search api
Collection:
var Backbone = require('backbone'),
_ = require('underscore'),
Urls = require('../../libs/urls'),
services = require('../../libs/services'),
skuListModel = require('../../models/sku/SkuListModel');
var SkuListCollection= Backbone.Collection.extend({
model: skuListModel,
sync: function (method, model, options) {
options = _.defaults({}, options, {
readUrl: Urls.sku.list
});
return services.sync.call(model, method, model, options);
}
});
View
searchData: function (e) {
var self = this;
var models = this.skuCollection.filter(function (item) {
return item.get("sku_code").indexOf(e.target.value) > -1
});
console.log(models);
if (models != null) {
self.skuCollection.set(models);
}
else {
self.skuCollection.fetch({
data: {
search_string: e.target.value
}
}).then(function (response) {
console.log(response);
//self.skuCollection.add(self.skuSearchCollection.toJSON(), { silent: true });
});
}
}
My question effectively is how do i modify my current collection to store the retrieved results and if my solution seems effective.

Move your filtering logic to the collection
Use promises to unify your response : an immediately resolved deferred if you find models, the xhr object if you have to fetch the data
Customize the behavior of fetch via the set options, e.g {remove: false} to keep the existing models
These points lead to a collection definition :
var SkuListCollection = Backbone.Collection.extend({
skus: function(code) {
var self = this;
var filtered = function() {
return self.filter(function (item) {
return item.get("sku_code").indexOf(code) !== -1;
});
};
var models = filtered();
if (models.length) {
// models found : define a promise and resolve it
var dfd = $.Deferred();
dfd.resolve(models);
return dfd.promise();
} else {
// models missing: fetch and add them
return this.fetch({
remove: false,
data: {
search_string: code
}
}).then(filtered);
}
}
});
Your view would then be rewired as :
searchData: function (e) {
this.skuCollection.skus(e.target.value).then(function(models) {
// do what you have to do with the filtered models
});
}
And a demo http://jsfiddle.net/nikoshr/84342xer/1/

could not update a variable in an angular service with ajax response data and use is to filter

i'm using the same code from this article (internationalization with angularjs)
...
but i need the "tables" variable to be fetched from an ajax request response using "$http get" but couldn't !! ... here is the code,
var xlat = angular.module('xlat', []);
xlat.factory('xlatService', function ($http) {
var currentLanguage = 'en';
// var tables = $.extend(true, {}, initialXlatTables);
var tables = {
'en': {
'textKeys.events': 'Events'
}
};
var service = {
getData: function () {
var req = {
method: 'GET',
url: 'local/en_US.php',
cache: true,
headers: {
'Content-Type': 'json'
}
};
$http(req).success(function (data) {
tables = data;
});
},
setCurrentLanguage: function (newCurrentLanguage) {
currentLanguage = newCurrentLanguage;
},
getCurrentLanguage: function () {
return currentLanguage;
},
xlat: function (label, parameters) {
service.getData();
if (parameters === null || $.isEmptyObject(parameters)) {
return tables[currentLanguage][label];
} else {
return $interpolate(tables[currentLanguage][label])(parameters);
}
}
};
return service;
});
but the variable "tables" does not change when i use the filter...
var xlat = angular.module('xlat', []);
xlat.filter('xlat', ['xlatService', function (xlatService) {
return function (label, parameters) {
return xlatService.xlat(label, parameters);
};
}]);

Try this one:
var xlat = angular.module('xlat', []);
xlat.filter('xlat', ['xlatService', function (xlatService) {
function myfiler(label, parameters) {
return xlatService.xlat(label, parameters);
};
myfiler.$stateful = true;
return myfilter;
}]);
Stateful filters -
https://code.angularjs.org/1.3.9/docs/guide/filter
Secod: you should load tables in factory method not in xlat function.

Ember inFlight Error on delete

Im getting this error and am having trouble debugging it:
Uncaught Error: Attempted to handle event `deleteRecord` on <Todos.Todo:ember309:29> while in state root.loaded.updated.inFlight.
All transactions between ember and my JSON API seem to be working fine, but if alter the state of the todo, by either renaming it or checking it as complete, and then do a delete, I get the error above.
the changes they are persisting, and if I delete a todo without making any changes, that works as well.
Here is some code:
Route
Todos.TodosRoute = Ember.Route.extend({
model: function () {
return this.store.find('todo');
}
});
Controller
Todos.TodoController = Ember.ObjectController.extend({
actions: {
editTodo: function () {
this.set('isEditing', true);
},
acceptChanges: function () {
this.set('isEditing', false);
if (Ember.isEmpty(this.get('model.title'))) {
this.send('removeTodo');
} else {
this.get('model').save();
}
},
removeTodo: function () {
var todo = this.get('model');
todo.deleteRecord();
todo.save();
},
},
isEditing: false,
isCompleted: function(key, value){
var model = this.get('model');
if (value === undefined) {
// property being used as a getter
return model.get('isCompleted');
} else {
// property being used as a setter
model.set('isCompleted', value);
model.save();
return value;
}
}.property('model.isCompleted')
});
Adapter
Todos.ApplicationAdapter = DS.RESTAdapter.extend({
defaultSerializer: "Todos/todosREST",
serialize: function(record, options) {
var tmp = get(record, 'store').serializerFor(record.constructor.typeKey).serialize(record, options);
console.log('ser2:', tmp)
return tmp
},
createRecord: function(store, type, record) {
var data = {};
var serializer = store.serializerFor(type.typeKey);
serializer.serializeIntoHash(data, type, record, { includeId: false });
var tmp = this.ajax(this.buildURL(type.typeKey), "POST", { data: data });
// console.log('createRecord:', tmp, data, record);
return tmp;
},
updateRecord: function(store, type, record) {
var data = {};
var serializer = store.serializerFor(type.typeKey);
serializer.serializeIntoHash(data, type, record);
var id = get(record, 'id');
var tmp = this.ajax(this.buildURL(type.typeKey, id), "PUT", { data: data })
console.log(this.buildURL(type.typeKey, id), "PUT", { data: data })
return tmp;
},
namespace: 'api'
});
Serializer
Todos.TodosRESTSerializer = DS.RESTSerializer.extend({
typeForRoot: function(root) {
var camelized = Ember.String.camelize(root);
var tmp = Ember.String.singularize(camelized);
console.log('Camelized:'. tmp)
return tmp;
},
keyForAttribute: function(attr) {
return Ember.String.underscore(attr);
},
serialize: function(record, options) {
// client to server
var json = {};
record.eachAttribute(function(name) {
json[serverAttributeName(name)] = record.get(name);
})
record.eachRelationship(function(name, relationship) {
if (relationship.kind === 'hasMany') {
json[serverHasManyName(name)] = record.get(name).mapBy('id');
}
});
console.log('options: ', options)
if (options && options.includeId) {
json.id = record.get('id');
}
return json;
},
serializeIntoHash: function(hash, type, record, options) {
// hash should be an empty object, so just extend it
Ember.merge(hash, this.serialize(record, options));
},
extractSingle: function(store, type, payload, id, requestType) {
// server to client
console.log('in serializer')
return this._super(store, type, post_payload, id, requestType);
},
extractArray: function(store, type, payload, id, requestType) {
// server to client
console.log(payload, type)
var todos = payload.objects;
payload = {todos: todos}
return this._super(store, type, payload, id, requestType);
},
});
Anyone have any ideas?

Reference var from one model to another returns defaults in Backbone

I have a model which sets the defaults like so:
var CampModel = Backbone.Model.extend({
defaults: {
siteID: $.jStorage.get('currentSiteID'),
active: -1,
pending: -1,
},
url: function () {
//some url.
},
sync: function (method, model, options) {
var method = 'read';
var that = this,
options = options || {};
options.success = function(model, response, options){
if(response.errorMessage != "Session is over")
console.log('Update session');
if(response.success)
if(response.returnValue.length){
that.set('response', response.returnValue);
that.CountActiveAndPending(response.returnValue);
}
else {
that.set('response', []);
}
else console.log('report: bad request, error: '+ response.errorMessage);
}
Backbone.sync(method, model, options);
},
},
//Counts active and pending campaigns for front page.
CountActiveAndPending: function (data) {
var active = 0;
var pending = 0;
//var it = this;
$.each(data, function (index, val) {
if (val.ApprovedOnSite) active++;
else pending++;
});
this.set('active', active);
this.set('pending', pending);
}
});
and in a different model I try and get the models parameters like so:
this.set({
campModel: new CampModel(),
})
});
this.get('campModel').save();
console.log(this.get('campModel').get('active'));
},
Everything seems to run great but when I try to get the "active" param from the CampModel I get the -1 default value and not the value assigned in the model. Any thoughts as to why this happens?

Model#save is asynchronous, when you're doing:
console.log(this.get('campModel').get('active'));
the server hasn't responded yet, so CountActiveAndPending has never been called and active is still -1. Try to log its value in your success callback.