I have data that i'm getting from an external API via jsonp.
I have requested the first 10 results. This comes back as an object.
I have new call with a button to fetch the next 10 results from it's cache but it just overwrites the first set of returned data.
How can I get Angular to append or push each subsequent data to the bottom?
$scope.getEanApi = function(){
devaFactory.searchRequest()
.then(function(data){
$scope.hotels = data.HotelListResponse.HotelList;
}).finally(function(){
});
return;
};
$scope.getEanApi();
$scope.moreResults = function(){
devaFactory.moreResults()
.then(function(data){
$scope.hotels = data.HotelListResponse.HotelList;
angular.extend($scope.hotels,$scope.hotels);
}).finally(function(){
});
return;
};
If it's an array then do as below:
$scope.data = $scope.data.concat(newData);
However it changes array reference with merged array so if you've used ng-repeat then it will redraw for whole array. If you're using any animation then you may want to redraw for newly elements only so for that append your new array data manually by iterating through as below.
for(var j=0;j<newData.length;j++) {
$scope.data.push(newData[j]);
}
If it's object then do
angular.extend($scope.data,newData);
Related
I'm trying to store 1 or more values that are inside an array into a scope. This is the result of my JSONP service,
angular.callbacks._7({
"id":157336,"results":[
{"id":"53db3c790e0a26189a000d09","iso_639_1":"en","key":"ePbKGoIGAXY","name":"Trailer 3","site":"YouTube","size":1080,"type":"Trailer"},
{"id":"550df44b9251413554004d43","iso_639_1":"en","key":"KlyknsTJk0w","name":"Own it today","site":"YouTube","size":720,"type":"Trailer"},
{"id":"533ec6fcc3a3685448009ccc","iso_639_1":"en","key":"nyc6RJEEe0U","name":"Teaser","site":"YouTube","size":720,"type":"Trailer"},
{"id":"5376ab510e0a26141c0005a8","iso_639_1":"en","key":"zSWdZVtXT7E","name":"Trailer","site":"YouTube","size":720,"type":"Trailer"},
{"id":"545da247c3a3685362005187","iso_639_1":"en","key":"Lm8p5rlrSkY","name":"Trailer 2","site":"YouTube","size":1080,"type":"Trailer"}
]
})
And I'm trying to store all the key values inside a scope called $scope.youtubeTrailer
But if I do it like this,
$scope.youtubeTrailer = response;
console.log ($scope.youtubeTrailer)
The scope consists of an object (the movie) and inside that object is an array with the 5 id's. So what would be the correct selector for something like this?
If I search like this,
console.log ($scope.youtubeTrailer.key)
I get an 'undefined´
* EDIT *
I've tried to solution below,
movieAdd.trailer(movie.id)
.then(function(response){
$scope.youtubeTrailer =[];
console.log ($scope.youtubeTrailer)
angular.forEach(response.results, function(item){
console.log ('Hello world')
if (item.hasOwnProperty('key')) {
$scope.youtubeTrailer.push(item.key);
}
});
The console.log ($scope.youtubeTrailer) shows that the scope is empty. And the forEach function doesnt fire because the Hello log doesn't get shown in the console. If I change $scope.youtubeTrailer =[]; into $scope.youtubeTrailer = response; I do have the object in the scope but still the forEach doesn't fire.
* EDIT 2 *
By changinge response.results into response the forEach does fire.
* EDIT 3 *
I've got it somewhat working. I was getting the array in the scope, but when I saved the scope value in the create function it showed as null in the database. That's because I was trying to save an array. Using javascripts join I converted the array to a string which can be saved.
movieAdd.trailer(movie.id)
.then(function(response){
$scope.youtubeTrailer = [];
angular.forEach(response, function(item){
if (item.hasOwnProperty('key')) {
$scope.youtubeTrailer.push(item.key);
var youtubeArray = $scope.youtubeTrailer
var youtubeString = youtubeArray.join();
The code below basically is looping through the response.results array, which contains 5 objects. Each oject is assigned to the variable item. Check item has property of key, if true, add the value of item.key to $scope.youtubeTrailer.
$scope.youtubeTrailer =[];
angular.forEach(response.results, function(item) {
if (item.hasOwnProperty('key')) {
$scope.youtubeTrailer.push(item.key);
}
});
Here is the link for Angular ForEach.
$scope.youtubeTrailer isn't just an object, it contains an array and its inside that array that the key field is. So, you're going to need to access the five interior items with an array access. e.g. $scope.youtubeTrailer.results[0].key
I am new to GeoFire, FireBase and Angular. I am trying to create a function that will take some coordinates and return some objects in vicinity of those coordinates.
I return a promise from the function which I assign to a scope variable used in the view hoping that when the promise is resolved by the ready event the array of objects in vicinity will be available.
obj.findGroupsInViscinity = function(pos){
var gFire = factoryAuth.geoFire;
var fbaseRef = factoryAuth.usersRef;
var groupsInQuery = {};
var groupsInQueryAr = [];
var deferred = $q.defer();
var geoQuery = gFire.query({
center: [pos.coords.latitude, pos.coords.longitude],
radius: 2
})
geoQuery.on("key_entered", function(groupId, groupLocation, distance) {
console.log("--> key_entered 1");
groupsInQuery[groupId] = true;
// Look up the vehicle's data in the Transit Open Data Set
fbaseRef.child("groups").child(groupId).once("value", function(dataSnapshot) {
console.log("--> key_entered 2");
// Get the vehicle data from the Open Data Set
group = dataSnapshot.val();
// If the vehicle has not already exited this query in the time it took to look up its data in the Open Data
// Set, add it to the map
if (group !== null && groupsInQuery[groupId] === true) {
console.log("Adding group", group);
// Add the group to the list of groups in the query
groupsInQuery[groupId] = group;
groupsInQueryAr.push({"name": group.name});
}
})
}) // end ke_entered monitoring
geoQuery.on("ready", function() {
console.log("GeoQuery ready event received. groupsInQueryAr = ", groupsInQueryAr);
deferred.resolve(groupsInQueryAr);
geoQuery.cancel();
console.log("GeoQuery canceled");
}) // Cacnel the geoQuery once we have gotten all the groups in viscinity
return deferred.promise; // Return a promise that will be resolved when ready event fires
}
Included below the console output from calling this function.
What I notice is that the key_entered part of the code is called twice in succession but before the code to process the key_entered event completes, the ready event is called because all key_entered events have fired. So while the key_entered part of the logic is building out the array I want to pass in resolving the promise, it is not ready at the time I resolve the promise in the ready event.
How can I ensure that I resolve the promise after all key_entered events have been processed and my array of objects has been built out properly?
Thanks,
Sanjay.
I would say that this is a bit of an XY problem and I would suggest you just load the restaurants into your view as you get them. This will probably be a better user experience in most cases.
That being said, if you want to do what you are asking about, you can make it work by using $.all(). Essentially, create and return your deferred promise. Start with an empty list and for every key_entered event, push a new promise onto the list. Then, in your ready event callback, do a $q.all() on the list of promises and once they complete (in the then() of the promise), do the deferred.resolve().
While performing a fetch() on my backbone collection, and instantiating models as children of that collection, I want to add one more piece of information to each model.
I thought that I could do this using set in the model initialize. (My assumption is that fetch() is instantiating a new model for each object passed into it. And therefore as each initialize occurs the extra piece of data would be set.
To illustrate my problem I've pasted in four snippets, first from my collection class. Second the initialize function in my model class. Third, two functions that I use in the initialize function to get the needed information from the flickr api. Fourth, and finally, the app.js which performs the fetch().
First the collection class:
var ArmorApp = ArmorApp || {};
ArmorApp.ArmorCollection = Backbone.Collection.extend({
model: ArmorApp.singleArmor,
url: "https://spreadsheets.google.com/feeds/list/1SjHIBLTFb1XrlrpHxZ4SLE9lEJf4NyDVnKnbVejlL4w/1/public/values?alt=json",
//comparator: "Century",
parse: function(data){
var armorarray = [];
var entryarray = data.feed.entry;
for (var x in entryarray){
armorarray.push({"id": entryarray[x].gsx$id.$t,
"Filename": entryarray[x].gsx$filename.$t,
"Century": entryarray[x].gsx$century.$t,
"Date": entryarray[x].gsx$date.$t,
"Country": entryarray[x].gsx$country.$t,
"City": entryarray[x].gsx$city.$t,
"Type": entryarray[x].gsx$type.$t,
"Maker": entryarray[x].gsx$maker.$t,
"Recepient": entryarray[x].gsx$recipient.$t,
"Flickrid": entryarray[x].gsx$flickrid.$t,
"FlickrUrl": "", //entryarray[x].gsx$flickrurl.$t,
"FlickrUrlBig": ""//entryarray[x].gsx$flickrurlbig.$t,
});
}
return armorarray;
}
});
Second, the initialization in my model.
initialize: function(){
//console.log("A model instance named " + this.get("Filename"));
item = this;
var flickrapi = "https://api.flickr.com/services/rest/?&method=flickr.photos.getSizes&api_key=<my_apikey>&photo_id=" + this.get("Flickrid") + "&format=json&jsoncallback=?";
sources = getFlickrSources(flickrapi);
sources.then(function(data){
sourceArray = parseFlickrResponse(data);
FlickrSmall = sourceArray[0].FlickrSmall;
console.log (FlickrSmall);
item.set("FlickrUrl", FlickrSmall);
console.log(item);
});
Notice here how I'm getting the "Flickrid" and using to get one more piece of information and then trying to add it back into the model with item.set("FlickrUrl", FlickerSmall);
console.log confirms that the property "FlickrUrl" has been set to the desired value.
Third, these are the functions my model uses to get the information it needs for the flicker api.
var getFlickrSources = function(flickrapi){
flickrResponse = $.ajax({
url: flickrapi,
// The name of the callback parameter, as specified by the YQL service
jsonp: "callback",
// Tell jQuery we're expecting JSONP
dataType: "jsonp"})
return flickrResponse;
}
var parseFlickrResponse = function(data){
flickrSourceArray = []
if (data.stat == "ok"){
sizeArray = data.sizes.size;
for (var y in sizeArray){
if (sizeArray[y].label == "Small"){
flickrSourceArray.push({"FlickrSmall": sizeArray[y].source});
}
else if (sizeArray[y].label == "Large"){
flickrSourceArray.push({"FlickrLarge": sizeArray[y].source});
}
}
}
return flickrSourceArray
}
But, fourth, when I try to perform the fetch and render the collection, I only get objects in my collection without the FlickrUrl property set.
//create an array of models and then pass them in collection creation method
var armorGroup = new ArmorApp.ArmorCollection();
armorGroup.fetch().then(function(){
console.log(armorGroup.toJSON());
var armorGroupView = new ArmorApp.allArmorView({collection: armorGroup});
$("#allArmor").html(armorGroupView.render().el);
});
var armorRouter = new ArmorApp.Router();
Backbone.history.start();
The console.log in this last snippet prints out all the objects/models supposedly instantiated through the fetch. But none of them include the extra property that should have been set during the initialization.
Any ideas what is happening?
What is this function ? getFlickrSources(flickrapi)
Why are you using this.get in the initialize function. Honestly it looks over-complicated for what you are trying to do.
If you want to set some parameter when you instantiate your model then do this var model = new Model({ param:"someparam", url:"someurl",wtv:"somewtv"});
If the point is to update your model just write an update function in your model something like update: function (newparam) { this.set;... etc and call it when you need it.
If I read you well you just want to set some params when your model is instantiated, so just use what I specified above. Here is some more doc : http://backbonejs.org/#Model-constructor
I hope it helps.
edit:
Put your call outside your model, you shouldn't (imo) make call inside your model this way it seems kinda dirty.
Sources.then(function(flickrdata) {
var mymodel = new Model({flicker:flickrdata.wtv});
});
It would be cleaner in my opinion.
Writing e2e tests for an Angular App, but I don't seem to be able to get my head around async programming and promises.
I'm attempting to get the value from each row, from the first column and add that to an array to eventually sort it from high to low to have the highest value.
I'm having some trouble resolving the promise of my rows.each, the errormsg is:
'TypeError: undefined is not a function'
//This function will fetch the highest ID from the columns
this.getHighestScheduleId = (function(){
//Array to collect the ID's in
var idArray = [];
//Collects all the rows in our table
var rows = $$('#schedulesData');
//Goes through each row
rows.each(function(row){
//Collect all the row's elements in rowElems
var rowElems = row.$$('td');
console.log(rowElems[0].getText());
});
});
map() would fit nicely here:
rows.each(function(row) {
var rowElems = row.all('td').map(function (td) {
return td.getText();
});
// resolve the promise to see the output on the console
rowElems.then(function (values) {
console.log(values);
});
});
Has anyone got any ideas on how to get a list of column header on the data grid. I have the issue that I can get text from the list of element on protractor. The return value always are promise and I don't know on Protractor how to get text on these promise before continue the next steps.
function getcolumnheaderlist(columnheader){
var textlist = [];
var promiselist = element.all(by.css('thead[role="rowgroup"] tr th a')).map(function (elmt) {
return elmt.getText();
});
promiselist.then(function (array) {
textlist.push(array);
});
console.log(textlist);
}
As my code above, the console alway print out empty. How I can force the action "get text" excute before printing out on console?
If you want to see the result or the resolve promises on the console, you need to put console.log() into then() function:
promiselist.then(function (headers) {
console.log(headers);
});