Develop Reference

Erro when trying to push to array from http request in vue.js

I'm trying to push an object into a response from a axios get request, but i always got an 'push is not a function' error
i'm trying to push inside the .then block of the http request
ps: i'm following the example from the vuejs site
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
bitCoinValue: null
},
mounted() {
this.getBitcoinValue();
},
filters: {
currencydecimal(value) {
return value.toFixed(2);
}
},
methods: {
getBitcoinValue: function () {
axios.get('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(response => {
this.bitCoinValue = response.data.bpi || [];
this.bitCoinValue.push({code: 'BRL', description: 'Reais', symbol: 'R$', rate_float: 25.50});
});
}
}
})
this is the error message:
Uncaught (in promise) TypeError: this.bitCoinValue.push is not a function
at site.js:21

the problem is that your response from https://api.coindesk.com/v1/bpi/currentprice.json the bpi entry is a Object therefore you can not use push because it is a function for the Array Object.
you have 2 options:
set your value as the similar approach that the api responds
getBitcoinValue: function () {
axios.get('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(response => {
this.bitCoinValue = response.data.bpi || [];
this.bitCoinValue['BRL'] = {code: 'BRL', description: 'Reais', symbol: 'R$', rate_float: 25.50};
});
}
convert the object to array then push
getBitcoinValue: function () {
axios.get('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(response => {
let objectResponse = response.data.bpi || {};
this.bitconValue = Object.values(objectResponse).map(item => item)
this.bitCoinValue['BRL'] = {code: 'BRL', description: 'Reais', symbol: 'R$', rate_float: 25.50};
});
}

Openig your API endpoint in a browser, I found out that the "bpi" key in the response JSON is not an array but rather an object. So, instead of .push()ing a value, you need to set the key directly, i.e. this.bitCoinValue.BRL = {...};.

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.

Why I'm getting the var undefined

I'm trying to get a Rest array and then display it on my HTML.
the problem that I'm facing is that In My factory I'm able to get the array and display it's content, but not in my controller where I'm always getting the Undefined var. here is my Factory
.factory('coursesService', function($resource) {
var service = {};
service.getAllCouses = function (){
var Courses = $resource("/myproject/rest/training/trainings");
var data = Courses.query().$promise.then(function(data)
{
service.data= data;
console.log("ligne 1: ", service.data[0].name);
console.log("ligne 1: ", service.data[0].creator);
console.log("ligne 2: ", data[1].name);
console.log("ligne 2: ", data[1].creator);
return service.data;
});
}
return service;
})
and my controller
.controller("CoursesController",
function CoursesController($scope, coursesService) {
var courses = {};
courses = coursesService.getAllCouses();
console.log("courses: ", courses);
})
as results I'm getting this:
courses: undefined
ligne 1: Angular
ligne 1: Object {id: "1", username: "User1", email: "user1#gmail.com", password: "password", userProfile: Object}
ligne 2: JavaScript
ligne 2: Object {id: "1", username: "User1", email: "user1#gmail.com", password: "password", userProfile: Object}
Why I'm getting courses: undefined? and Shouldn't be displayed after the list that I'm displaying in the factory?

Your getAllCouses function never returns anything, and so calling it always results in undefined. The callback to the query promise then handler returns something, but not getAllCouses.
You'll need to have getAllCouses return the promise, and then use the result from within a then handler on that promise. You can't just use its return value directly, not if Courses.query() is async (and if it isn't, why is it returning a promise?).
That would look something like this:
.factory('coursesService', function($resource) {
var service = {};
service.getAllCouses = function (){
var Courses = $resource("/myproject/rest/training/trainings");
var data = Courses.query().$promise.then(function(data) {
service.data= data;
console.log("ligne 1: ", service.data[0].name);
console.log("ligne 1: ", service.data[0].creator);
console.log("ligne 2: ", data[1].name);
console.log("ligne 2: ", data[1].creator);
return service.data;
});
return data; // <=== Return the promise (`data` is a bit of a suspect name)
};
return service;
})
Then:
.controller("CoursesController", function CoursesController($scope, coursesService) {
coursesService.getAllCouses().then(function(courses) { // <=== Use the promise
console.log("courses: ", courses); // <===
}); // <===
})
...but I'm not an Angular guy.

getAllCouses() does not return a value, it just sets two local variables, Courses and data.
The Courses.query promise only resolves once the web request is complete, so those logs are delayed.

I fixed the issue by updating my service and controller like this:
.factory('coursesService', function($resource) {
return $resource("/myproject/rest/training/trainings", {
query : {
method : "GET",
isArray : true
}
});
});
I just added the
isArray : true
and i updated the controller
.controller(
"CoursesController",
function UserController($scope, coursesService) {
coursesService.query(function(data) {
console.info("data: ", data)
console.log("1st course: ", data[0].name)
$scope.Courses = data;
});

I fix it simply in this way:
.factory('coursesService', function($resource) {
return $resource("/myproject/rest/training/trainings")
})
and the controller:
.controller("coursesController", function($scope, coursesService) {
coursesService.query(function(data) {
$scope.Courses = data;
});
})

Testing a loader in angular js

This is a test for a $resource with a loader
describe('Service: MultiCalculationsLoader', function(){
beforeEach(module('clientApp'));
var MultiCalculationLoader,
mockBackend,
calculation;
beforeEach(inject(function (_$httpBackend_, Calculation, _MultiCalculationLoader_) {
MultiCalculationLoader = _MultiCalculationLoader_;
mockBackend = _$httpBackend_;
calculation = Calculation;
}));
it('should load a list of calculation from a user', function(){
mockBackend.expectGET('/api/user/600/calculation').respond([{id:5}]);
var calculations;
var mockStateParams = {
userId: 600
};
var promise = new MultiCalculationLoader(mockStateParams);
promise.then(function(res){
calculations = res
});
expect(calculations).toBeUndefined();
mockBackend.flush();
expect(calculations).toEqual([{id:5}]);
});
});
When I run the test I get the following error:
Expected [ { id : 5 } ] to equal [ { id : 5 } ].
Error: Expected [ { id : 5 } ] to equal [ { id : 5 } ].
at null.<anonymous>
I don't get it. The two arrays are the same to me. Ideas anyone?
Update
Here's the implementation:
.factory('Calculation', function ($resource) {
return $resource('/api/user/:userId/calculation/:calcId', {'calcId': '#calcId'});
})
.factory('MultiCalculationLoader', function (Calculation, $q) {
return function ($stateParams) {
var delay = $q.defer();
Calculation.query( {userId: $stateParams.userId},function (calcs) {
delay.resolve(calcs);
}, function () {
delay.reject('Unable to fetch calculations');
});
return delay.promise;
};
})

The url you expect is different from the actual url. I guess you need something like this:
it('should load a list of calculation from a user', function(){
//remove the 's' from 'calculations'
mockBackend.expectGET('/api/user/600/calculation').respond([{id:5}]);
var calculations;
var promise = MultiCalculationLoader({userId:600}); //userId = 600
promise.then(function(res){
calculations = res
});
expect(calculations).toBeUndefined();
mockBackend.flush();
expect(calculations).toEqual([{id:5}]);
});
There is another problem that angular automatically adds 2 properties to the response:
http://plnkr.co/edit/gIHolGd85SLswzv5VZ1E?p=preview
It's kind of the same problem as: AngularJS + Jasmine: Comparing objects
This is really a problem with angular $resource when angular convert the response to resource objects. In order to verify responses from $resource, you could try angular.equals
expect(angular.equals(calculations,[{id:5},{id:6}])).toBe(true);
http://plnkr.co/edit/PrZhk2hkvER2XTBIW7yv?p=preview
You could also write a custom matcher:
beforeEach(function() {
jasmine.addMatchers({
toEqualData: function() {
return {
compare: function(actual, expected) {
return {
pass: angular.equals(actual, expected)
};
}
};
}
});
});
And use it:
expect(calculations).toEqualData([{id:5},{id:6}]);
http://plnkr.co/edit/vNfRmc6R1G69kg0DyjZf?p=preview

Jasmine equality selectors can be too specfic sometimes when you just wanna check for equaity.
I have never seen it with the toEqual() method when comparing objects or arrays, but def with the toBe() method.
Try to replace toEqual() with toMatch().
Also in the unit test I recommend using a constant value that you can pass in the response and the matchers/equal/toBe's.
describe('Service: MultiCalculationsLoader', function(){
beforeEach(module('clientApp'));
var MultiCalculationLoader,
mockBackend,
calculation,
VALUE = [{id:5}];
beforeEach(inject(function (_$httpBackend_, Calculation, _MultiCalculationLoader_) {
MultiCalculationLoader = _MultiCalculationLoader_;
mockBackend = _$httpBackend_;
calculation = Calculation;
}));
it('should load a list of calculation from a user', function(){
mockBackend.expectGET('/api/user/600/calculations').respond(VALUE);
var calculations;
var promise = MultiCalculationLoader();
promise.then(function(res){
calculations = res
});
expect(calculations).toBeUndefined();
mockBackend.flush();
expect(calculations).toEqual(VALUE);
});
});
Using this approach I think the .toEqual will actually work.
Our approach:
Before Block:
httpBackend.when('JSONP', PATH.url + 'products?callback=JSON_CALLBACK&category=123').respond(CATEGORIES[0]);
Test:
describe('Category Method', function () {
it('Should return the first category when the method category is called', function () {
var result = '';
service.category(123).then(function(response) {
result = response;
});
httpBackend.flush();
expect(result).toEqual(CATEGORIES[0]);
});
});

you can try change toEqual() with toEqualData()
expect(calculations).toEqualData([{id:5}]);

Angular resource response interceptor

I want to create a Custom Action on Resource, which will process the results received from the server.
angular.module('problem', ['ngRoute', 'ngResource'])
.factory('Abc', function ($resource) {
return $resource('api/abc/:abcId', {abcId: '#id'}, {
customQuery: {
method: "GET",
isArray: true,
interceptor: {
response: function (response) {
// some operations that manipulate data based od response
response.data = [5, 6]; // for simplifity
console.log("manipulation finished"); // log is saved
return response;
}
}
}
}
);
})
;
But when I use the Custom Action, I get the unmodified results instead of processed.
Here is the code showing the expected behavior (and in comments relevant errors):
describe('Abc', function () {
beforeEach(module('problem'));
var $httpBackend;
beforeEach(function () {
angular.mock.inject(function ($injector) {
$httpBackend = $injector.get('$httpBackend');
})
});
it('should return converted array when customQuery called', inject(function (Abc) {
$httpBackend
.expectGET('api/abc')
.respond([
{id: 'uid1', name: 'name1'},
{id: 'uid2', name: 'name2'},
{id: 'uid3', name: 'name3'},
{id: 'uid4', name: 'name4'}
]);
var result = Abc.customQuery();
$httpBackend.flush();
expect(result.length).toBe(2); // fails with "Expected 4 to be 2."
expect(result[0]).toBe(5); // fails with "Expected { id : 'uid1', name : 'name1' } to be 5."
expect(result[1]).toBe(6); // fails with "Expected { id : 'uid2', name : 'name2' } to be 6."
}));
});

Maybe what you need is to add a new transformResponse transformation, you can easily do that like this (remember to inject $http):
transformResponse: $http.defaults.transformResponse.concat([
function (data, headersGetter) {
return data.objects
}
Difference is, result will be substituted by response.resource, while the return value of the interceptor is the value that is resolving result.$promise

thank you for the "interceptor" idea!
in my opinion
response.data = [5, 6]; // for simplifity
return response;
should return a response-object, with a property-array "data", so
result.length;
should fail.
For manipulating the results of a resource response better use response.resource instead of response.data - there are the real REST objects (with CRUD methods)