Downloading data to Angular from Another URL - angularjs

I am new to Angular and need to download data into a service. It works fine with local json file; however, obviously you want to get the data from another URL which then gives the issue of cross domain download. Is there a way to go around this? I need to download the data from here http://files.parsetfss.com/c2e487f5-5d96-43ce-a423-3cf3f63d9c5e/tfss-31564b7d-6386-4e86-97c5-cca3ffe988f3-phones.json rather than 'phones/phones.json' below.
'use strict';
/* Services */
function makeArray(Type) {
return function(response) {
var list = [];
angular.forEach(response.data, function(data) {
list.push(new Type(data));
});
return list;
}
}
function instantiate(Type) {
return function(response) {
return new Type(response.data);
}
}
angular.module('phonecatServices', []).
factory('Phone', function($http){
var Phone = function(data){
angular.copy(data, this);
};
Phone.query = function() {
return $http.get('phones/phones.json').then(makeArray(Phone));
}
Phone.get = function(id) {
return $http.get('phones/' + id + '.json').then(instantiate(Phone));
}
// Put other business logic on Phone here
return Phone;
});
Can this be put in the following query from parse.com (how can I write the http request bit to fit into Angular.
var query = new Parse.Query("coursesParse");
query.find({
success: function(results) {
},
error: function(error) {
}
});

You can do it this way.
Phone.query = function() {
var query = new Parse.Query("test");
query.find({
success: function(results) {
//makeArray(Phone(results));
for (var i = 0; i < results.length; i++) {
var object = {
"age": results[i].get('age'),
"carrier": results[i].get('carrier'),
"id": results[i].get('id1'),
"imageUrl": results[i].get('imageUrl'),
"name": results[i].get('name'),
"snippet": results[i].get('snippet')
};
makeArray(Phone(object));
}
},
error: function(error) {
}
});
}

Related

How to add pagination in Restangular and Django Rest Framework?

In DRF I have added pagination limit to 100 'PAGINATE_BY': 100,
since Restangular expects results in array form, I had to use the below meta extractor function in my angular app module
var app = angular.module("myapp", ["restangular"].config(function(
RestangularProvider){
RestangularProvider.setResponseExtractor(function(response, operation, what, url) {
if (operation === "getList") {
var newResponse = response.results;
newResponse._resultmeta = {
"count": response.count,
"next": response.next,
"previous": response.previous
};
return newResponse;
}
return response;
});
});
and my controller looks like
app.controller('DataCtrl',function($scope, Restangular){
var resource = Restangular.all('myapp/api/dataendpoint/');
resource.getList().then(function(data){
$scope.records = data;
});
}
Meta info is not available in controller, how do I paginate if there are more than 100 records available?
I suppose you could simply call:
RestangularProvider.addResponseExtractor(function(data, operation, what, url, response) {
if (operation === "getList") {
data._resultmeta = {
"count": response.count,
"next": response.next,
"previous": response.previous
};
return data;
}
return response;
});
and
var page = 2;
var resource = Restangular.all('myapp/api/dataendpoint/');
resource.getList({page: page}).then(function(data){
console.log(data._resultmeta.next ? 'there is more pages' : 'You reach the end');
});
I'm not usual with Rectangular but Django Rest Framework support pagination from query parameter

compare to object angular js

i have a problem with AngularJS I receive from api json that json contains a prod url and url prerpod I would make calls to these APIs to retrieve a new one json then compare the results to validate which are the same as the problem is that I have a 200 aPI test how can I do. Thank you in advance
ps I think the test objects with the method equals.
i have 100 object like this:
{
"ID": "1",
"URL_preprod": "url1",
"Preprod_bis": "url2",
"prod": "url3",
}
i need to check if the result of call is equals for each object.
function callAtTimeout() {
if ($scope.preprod && $scope.preprodBis) {
angular.equals($scope.preprod,$scope.preprodBis);
$scope.msg = "equals";
}}
$scope.test = function() {
if (tnrArray) {
for (var i = 0; i < tnrArray.length; i++) {
var urlPreprod = tnrArray[i].URL_preprod;
console.log(urlPreprod);
$http.get(urlPreprod).success( function(response) {
$scope.preprod = response;
console.log(response);
});
var urlPreprodBis = tnrArray[i].Preprod_bis;
console.log(urlPreprodBis);
$http.get(urlPreprodBis).success( function(response) {
$scope.preprodBis = response;
console.log(response);
});
$timeout(callAtTimeout, 3000);
}
var response1;
$http.get("/your/url").then(function(response) {
response1 = response;
return $http.get(response.prodUrl);
}).then(function(prodResponse) {
console.log(prodResponse);
console.log(_.isEqual(response1 , prodResponse)); // uses lodash
}).catch(function(badResponse) {
console.log("oops something went wrong", badResponse);
})
this should work - lodash is used to check for equality
TO DO THIS FOR 200 URLs ASYNCHRONOUSLY ...
var urlList = ['/path/url1','/path/url2','/path/url3'];
angular.forEach(urlList, function(url) {
var response1;
$http.get(url).then(function(response) {
response1 = response;
return $http.get(response.prodUrl);
}).then(function(prodResponse) {
console.log(prodResponse);
console.log(angular.equals(response1 , prodResponse));
}).catch(function(badResponse) {
console.log("oops something went wrong", badResponse);
})
});

Getting the phoneNumber using $cordovaContacts

I'm trying to get all the contacts in the phone using ng-cordova, I success to do that like the following, I create a service in AngularJS:
.factory("ContactManager", function($cordovaContacts) {
return {
getContacts: function() {
var options = {};
options.filter = "";
options.multiple = true;
//get the phone contacts
return $cordovaContacts.find(options);
}
}
})
Also the method find in the ng-cordova is't like the following:
find: function (options) {
var q = $q.defer();
var fields = options.fields || ['id', 'displayName'];
delete options.fields;
navigator.contacts.find(fields, function (results) {
q.resolve(results);
},
function (err) {
q.reject(err);
},
options);
return q.promise;
}
And did the following inside the controller:
ContactManager.getContacts().then(function(result){
$scope.users= result;
}, function(error){
console.log(error);
});
I noticed that in the $scope.users I find the formatted, middleName ..., but I can't find the phoneNumber, how can I get also the phoneNumbers?
If you log the contacts you should see an object with a phoneNumbers array in it.
ContactManager.getContacts().then(function(result){
$scope.users= result;
console.log(result);
...
If you don't it's something else.
I also made a somewhat close mock json of what the return looks like.

is invoking a service into another service in angular

I need to save data and then I need to dispaly the changes immediately afterwards.
That's why I Have a
updateSaisine which allows me to update data
getOneSaisine which allows me get the data and display them:
Which is the more correct way and for which reasons ?
Should I write:
$scope.saveSaisine = function() {
saisineSrv.updateSaisine($scope.currentSaisine.idSaisine, $scope.currentSaisine).
then(
function() {
$scope.errorMessages = [];
if ($scope.currentSaisine.idMotif) {
toaster.pop('success', 'Réponse', 'Success');
angular.element('#modalSaisine').modal('hide');
saisineSrv.getOneSaisine($scope.currentSaisine.idSaisine, $scope.currentSaisine).then(function(response) {
$scope.currentSaisine.dateModif = response.dateModif;
});
},
function error(response) {
$scope.errorMessages = response.data;
toaster.pop('error', 'Réponse', 'We have a problem');
}
);
};
OR
$scope.saveSaisine = function() {
saisineSrv.updateSaisine($scope.currentSaisine.idSaisine, $scope.currentSaisine).
then(
function() {
$scope.errorMessages = [];
if ($scope.currentSaisine.idMotif) {
toaster.pop('success', 'Réponse', 'Success');
angular.element('#modalSaisine').modal('hide');
},
function error(response) {
$scope.errorMessages = response.data;
toaster.pop('error', 'Réponse', 'We have a problem');
}
);
saisineSrv.getOneSaisine($scope.currentSaisine.idSaisine, $scope.currentSaisine).then(function(response) {
$scope.currentSaisine.dateModif = response.dateModif;
});
};
the first option is a correct way how you should refresh your data because these services are asynchronous thus in the second example you may don't get fresh data (the getOneSaisine can finish before updateSaisine).

Uploading images to Firebase with AngularJS

I have a service that handles "episodes": creating, deleting and updating them. It looks like this:
app.service('Episode', ['$firebase', 'FIREBASE_URL', function($firebase, FIREBASE_URL) {
var ref = new Firebase(FIREBASE_URL);
var episodes = $firebase(ref);
return {
all: episodes,
create: function(episode) {
location.reload();
//Add to firebase db
return episodes.$add(episode);
},
delete: function(episodeId) {
location.reload();
return episodes.$remove(episodeId);
},
update: function(episode) {
location.reload();
return episodes.$save(episode);
}
};
}]);
Inside my controller:
app.controller('AdminCtrl', ['$scope', 'Episode', function ($scope, Episode) {
$scope.episodes = Episode.all;
$scope.createEpisode = function(){
Episode.create($scope.episode).then(function(data){
$scope.episode.name = '';
$scope.episode.title = '';
$scope.episode.description = '';
$scope.episode.time = '';
$scope.episode.img = '';
});
};
$scope.deleteEpisode = function(episodeId){
if(confirm('Are you sure you want to delete this episode?') === true) {
Episode.delete(episodeId).then(function(data){
console.log('Episode successfully deleted!');
});
}
};
$scope.updateEpisode = function(episode) {
Episode.update($scope.episode).then(function(data) {
console.log('Episode successfully updated.');
});
};
The only example of uploading images to Firebase from AngularJS I've seen online is this: https://github.com/firebase/firepano
How am I able to incorporate this into an object based addition/update instead of finding it's index/link?

Resources