Develop Reference

remember search query to use in function

I'm using Angularjs with the dirPagination plugin to connect with an Web API. This seems to work fine. I added a search function, to do a server side search:
$scope.searchChanged = function () {
if ($scope.searchFor.length == 0) {
$scope.calculatedValue = 'e';
} else {
vm.getData(vm.pageno, vm.getSearch($scope.searchFor));
}
}
vm.getSearch = function (query) {
if (query == undefined) {
query = 'tech';
} else {
query = query;
}
return query;
}
See Plnkr for the full code
If I start searching (e.g. sales) the API returns results and the paging is correct, the get request is:
/api/students/?category=sales&begin=1&pageSize=10
But if you want to go to another page number, the get request to the server is:
/api/students/?category=tech&begin=2&pageSize=10
How can the view remember the query 'sales', so that the paging and results are correct?

You are making a common mistake here: You don't need to pass in variable from the view if you are already using a scope variable.
Changing to this would be much less error prone
// change this to var getSearch or function getSearch if you don't need it on the view anymore
vm.getSearch = function () {
var query = vm.searchFor;
// you should only use vm, change ng-model to data.searchFor
if (query == undefined) {
query = 'tech';
}
return query;
}
vm.getData = function () {
vm.users = [];
$http.get("/api/students/?category=" + vm.getSearch() + "&begin=" + vm.pageno + "&pageSize=" + vm.itemsPerPage).success(function (response) {
vm.users = response.data;
vm.total_count = response.total_count;
});
};

Your request id good, you need to optimize the sql query so you can get the right results. it should look something like this:
#begin INT = 0,
#pageSize INT = 10
SELECT *
FROM [TableName]
ORDER BY id
OFFSET (#pageSize * #begin )
ROWS FETCH NEXT #pageSize ROWS ONLY;

Alternative to __super__ in javascript?

I'm trying to get this fiddle I found to work in Firefox. It's working fine in Chrome, but in Firefox all the options appear as blank lines. I suspect the issue is __super__ on line 8, since from Googling around I read that it only exists in Javascript because of CoffeeScript. (the fiddle does not use backbone.js, which I understand implements its own __super__.) I'd prefer not to have any dependences other than jQuery and select2. So, what other ways could this be written?
Here's the full js code from the fiddle:
$.fn.select2.amd.require(
['select2/data/array', 'select2/utils'],
function (ArrayData, Utils) {
function CustomData($element, options) {
CustomData.__super__.constructor.call(this, $element, options);
}
function contains(str1, str2) {
return new RegExp(str2, "i").test(str1);
}
Utils.Extend(CustomData, ArrayData);
CustomData.prototype.query = function (params, callback) {
if (!("page" in params)) {
params.page = 1;
}
var pageSize = 50;
var results = this.$element.children().map(function(i, elem) {
if (contains(elem.innerText, params.term)) {
return {
id:[elem.innerText, i].join(""),
text:elem.innerText
};
}
});
callback({
results:results.slice((params.page - 1) * pageSize, params.page * pageSize),
pagination:{
more:results.length >= params.page * pageSize
}
});
};
$("#ioList").select2({
ajax:{},
allowClear:true,
width:"element",
dataAdapter:CustomData
});
});

Reactive javascript - convert ajax calls to Bacon.js stream with pagination

How can I convert calls to server API, with pagination support, to a Bacon.js / RxJs stream?
For the pagination I want to be able to store the last requested item-index, and ask for the next page_size items from that index to fill the stream.
But I need the 'load next page_size items' method to be called only when all items in stream already been read.
Here is a test that I wrote:
var PAGE_SIZE = 20;
var LAST_ITEM = 100;
var FIRST_ITEM = 0;
function getItemsFromServer(fromIndex) {
if (fromIndex > LAST_ITEM) {
return [];
}
var remainingItemsCount = LAST_ITEM-fromIndex;
if (remainingItemsCount <= PAGE_SIZE) {
return _.range(fromIndex, fromIndex + remainingItemsCount);
}
return _.range(fromIndex, fromIndex + PAGE_SIZE);
}
function makeStream() {
return Bacon.fromBinder(function(sink) {
var fromIndex = FIRST_ITEM;
function loadMoreItems() {
var items = getItemsFromServer(fromIndex);
fromIndex = fromIndex + items.length;
return items;
}
var hasMoreItems = true;
while (hasMoreItems) {
var items = loadMoreItems();
if (items.length < PAGE_SIZE) { hasMoreItems = false; }
_.forEach(items, function(item) { sink(new Bacon.Next(item)); });
}
return function() { console.log('done'); };
});
}
makeStream().onValue(function(value) {
$("#events").append($("<li>").text(value))
});
http://jsfiddle.net/Lc2oua5x/10/
Currently the 'getItemsFromServer' method is only a dummy and generate items locally. How to combine it with ajax call or a promise that return array of items? and can be execute unknown number of times (depends on the number of items on the server and the page size).
I read the documentation regarding Bacon.fromPromise() but couldn't manage to use it along with the pagination.

You need to use flatMap to map pages to streams created with Bacon.fromPromise. Here is a working example, where I use the jsfiddle echo endpoint ( it sends the same data back )
Bacon.sequentially(0, _.range(0,5))
.map(toIndex)
.flatMap(loadFromServer)
.onValue(render)
function toIndex(page) {
return page * PAGE_SIZE
}
function loadFromServer(index) {
var response = getItemsFromServer(index)
return Bacon.fromPromise($.ajax({
type: 'POST',
dataType: 'json',
url: '/echo/json/',
data : { json: JSON.stringify( response ) }
}))
}
function render(items) {
items.forEach(function(item) {
$("#events").append($("<li>").text(item))
})
}
http://jsfiddle.net/1eqec9g3/2/
Note: this code relies on responses coming from the server in the same order they were sent.

How show alert after ajax post loop done ? Javascript [duplicate]

loadInfo: function(){
var jsonCounter = 0,
room = ['room1','room2','room3'],
dates = [],
prices = []
$.each(booking.rooms, function(key, room_name) {
$.getJSON('/get_info.php?room='+room_name, function(data) {
dates[room_name] = data
jsonCounter++
})
$.getJSON('/get_info.php?room='+room_name+'&prices', function(data) {
prices[room_name] = data
jsonCounter++
})
})
function checkIfReady() {
if (jsonCounter === rooms.length * 2) {
clearInterval(timer)
run_the_rest_of_the_app()
}
}
var timer = setInterval(checkIfReady, 100)
}
(Modified a lot, as it's part of a class etc etc.)
At the moment this feels a bit hackish, as the timer usage seems rubbish. I would use $.when and $.done, but I don't know how many rooms there might be, so I don't know what to put into when.
How do I ensure that run_the_rest_of_the_app() only gets called once all of the AJAX requests come back?

var activeAJAX = 0;
Before making an AJAX call, activeAJAX++;
After completing an AJAX call (in the callback): if (--activeAJAX == 0) { allDone(); }

Here is how to use when/done
loadInfo: function(){
var room = ['room1','room2','room3'],
dates = [],
prices = [],
requests = [];
$.each(booking.rooms, function(key, room_name) {
var aRequest;
aRequest = $.getJSON('/get_info.php?room='+room_name, function(data) {
dates[room_name] = data;
});
requests.push(aRequest);
aRequest = $.getJSON('/get_info.php?room='+room_name+'&prices', function(data) {
prices[room_name] = data;
});
requests.push(aRequest);
})
$.when.apply($, requests).done(run_the_rest_of_the_app);
}

Advanced search/queue array collection question

I have a pretty large number of objects "usrSession" I store them in my ArrayCollection usrSessionCollection.
I'M looking for a function that returns the latest userSessions added with a unique userID. So something like this:
1.
search the usrSessionCollection and only return one userSessions per userID.
2.
When it has returned x number of userSessions then deleted them from the usrSessionCollection
I'M stuck - would really love some code that can help me with that.
function ArrayCollection() {
var myArray = new Array;
return {
empty: function () {
myArray.splice(0, myArray.length);
},
add: function (myElement) {
myArray.push(myElement);
}
}
}
function usrSession(userID, cords, color) {
this.UserID = userID;
this.Cords = cords;
this.Color = color;
}
usrSessionCollection = new ArrayCollection();
$.getJSON(dataurl, function (data) {
for (var x = 0; x < data.length; x++) {
usrSessionCollection.add(new usrSession(data[x].usrID.toString(), data[x].usrcords.toString() ,data[x].color.toString());
}
});
Thanks.

The biggest issue is that you have made the array private to the outside world. Only methods through which the array can be interacted with are add and empty. To be able to search the array, you need to either add that functionality in the returned object, or expose the array. Here is a modified ArrayCollection:
function ArrayCollection() {
var myArray = new Array;
return {
empty: function () {
myArray.splice(0, myArray.length);
},
add: function (myElement) {
myArray.push(myElement);
},
getAll: function() {
return myArray;
}
}
}
Now to get the last N unique session objects in usrSessionCollection, traverse the sessions array backwards. Maintain a hash of all userID's seen so far, so if a repeated userID comes along, that can be ignored. Once you've collected N such user sessions or reached the beginning of the array, return all collected sessions.
usrSessionCollection.getLast = function(n) {
var sessions = this.getAll();
var uniqueSessions = [];
var addedUserIDs = {}, session, count, userID;
for(var i = sessions.length - 1; i >= 0, uniqueSessions.length < n; i--) {
session = sessions[i];
userID = session.userID;
if(!addedUserIDs[userID]) {
uniqueSessions.push(session);
addedUserIDs[userID] = true;
}
}
return uniqueSessions;
}
I wouldn't combine the delete step with the traversal step, just to keep things simple. So here's the remove method that removes the given session from the array. Again, it's better to modify the interface returned by ArrayCollection rather than tampering with the sessions array directly.
function ArrayCollection(..) {
return {
..,
remove: function(item) {
for(var i = 0; i < myArray.length; i++) {
if(item == myArray[i]) {
return myArray.splice(i, 1);
}
}
return null;
}
};
}
Example: Get the last 10 unique sessions and delete them:
var sessions = usrSessionCollection.getLast(10);
for(var i = 0; i < sessions.length; i++) {
console.log(sessions[i].UserID); // don't need dummy variable, log directly
usrSessionCollection.remove(sessions[i]);
}
See a working example.

You made your array private, so you can't access the data, except adding a new element or removing them all. You need to make the array public, or provide a public interface to access the data. Like first(), next() or item(index).
Then you can add a search(userID) method to the usrSessionCollection, which uses this interface to go through the elements and search by userID.
UPDATE: this is how I would do it: - See it in action. (click preview)
// user session
function userSession(userID, cords, color) {
this.UserID = userID;
this.Cords = cords;
this.Color = color;
}
// a collection of user sessionions
// a decorated array basically, with
// tons of great methods available
var userSessionCollection = Array;
userSessionCollection.prototype.lastById = function( userID ) {
for ( var i = this.length; i--; ) {
if ( this[i].UserID === userID ) {
return this[i];
}
}
// NOTE: returns undefined by default
// which is good. means: no match
};
// we can have aliases for basic functions
userSessionCollection.prototype.add = Array.prototype.push;
// or make new ones
userSessionCollection.prototype.empty = function() {
return this.splice(0, this.length);
};
//////////////////////////////////////////////////////
// make a new collection
var coll = new userSessionCollection();
// put elements in (push and add are also available)
coll.add ( new userSession(134, [112, 443], "#fffff") );
coll.push( new userSession(23, [32, -32], "#fe233") );
coll.push( new userSession(324, [1, 53], "#ddddd") );
// search by id (custom method)
var search = coll.lastById(134);
if( search ) {
console.log(search.UserID);
} else {
console.log("there is no match");
}
// empty and search again
coll.empty();
search = coll.lastById(134);
if( search ) {
console.log(search.UserID);
} else {
console.log("there is no match");
}