We Keep Coding

Passing a Promise from one Service Call To Another in Angular

So I've got a service call going out to the back end and saving an object, the call has a promise set up to return a number.
That call looks like this
saveTcTemplate(item: ITermsConditionsTemplate): ng.IPromise<number> {
item.modifiedDate = new Date();
return this.$http.post(this.api + '/SaveTcTemplate', item)
.then(this.returnData);
}
returnData = (response: any) => {
return response.data;
};
This is when creating a new object, all the fields are set to their needed values, passed to save in, then called to be displayed.
This is the get function used to pull the object after it's been saved.
getTermsConditions(id: number): ng.IPromise<ITermsConditionsTemplate> {
return this.$http.get(this.api + '/GetTermsConditions',
{
params: {
id: id
}
}).then(this.returnData);
}
This is the initial construction, saving, and getting, of the object
this.newTemplate.copyId = 0;
this.newTemplate.id = 0;
this.newTemplate.isLibrary = true;
this.newTemplate.studyFacilityScheduleId = this.studyFacilityScheduleId;
this.studyTermsConditionsService.saveTcTemplate(this.newTemplate)
.then(this.studyTermsConditionsService.getTermsConditions)
.then(this.setTemplateData);
When set up like this I can successfully save a new item, and have its id (the ng.IPromise part) returned to me, and passed into my Get service call.
The problem is, when set up this way, this.$http.get comes back undefined. From what I think I understand from other stack overflow issues that are similar, it is happening because I called the function without explicitly passing anything into it's parameter when I say
.then(this.studyTermsConditionsService.getTermsConditions)
To test this I also set up the save and get like this
var data: any;
data = this.studyTermsConditionsService.saveTcTemplate(this.newTemplate);
this.studyTermsConditionsService.getTermsConditions(data)
.then(this.setTemplateData);
And that worked, sort of. $http.Get was recognized, and could be used, but the problem with this setup was; due to the asynchronous nature of ng.IPromise the data isn't being sent to my Get function as the promised number value. It's being sent as type $$promise which results in the parameter in my get function being NaN.
So one way I'm passing a usable value, i.e. 32, but I'm not explicitly passing this value, so $http.get is undefined.
The other way, I am explicitly passing a parameter, so $http.get is recognized, and usable, but the explicitly called parameter is of type $$promise, not type number, It seems, unfortunately, the ng.IPromise< number > is not resolved by time I call my Get function.
How do I proceed from here??

I guess you are messed up with this. As you directly pass the function reference as parameter it lost with the context. You should call them explicitly like below.
Code
this.newTemplate.copyId = 0;
this.newTemplate.id = 0;
this.newTemplate.isLibrary = true;
this.newTemplate.studyFacilityScheduleId = this.studyFacilityScheduleId;
this.studyTermsConditionsService.saveTcTemplate((response) => this.newTemplate(response))
.then((response) => this.studyTermsConditionsService.getTermsConditions(response))
.then((response) => this.setTemplateData(response));
Otherwise you could make your function to use of arrow function which would help to available this context inside function.
saveTcTemplate(item: ITermsConditionsTemplate): ng.IPromise<number> { .. }
should be
saveTcTemplate = (item: ITermsConditionsTemplate): ng.IPromise<number> => { .. }
And
getTermsConditions(id: number): ng.IPromise<ITermsConditionsTemplate> { .. }
should be
getTermsConditions = (id: number): ng.IPromise<ITermsConditionsTemplate> => { .. }

How can you recover the source code from a pure JavaScript function?

By Pure, I mean in the sense of the λ-calculus, i.e., a single-argument function containing nothing on its body other than single-argument functions and single argument function calls. By recovering the source code, I mean up to variable renaming. So, for example,
n2 = function(v0){return function(v1){return v0(v0(v1))}}
console.log(source(n2));
console.log(source(n2(n2)));
Should print:
function(v0){return function(v0){return v0(v0(v1))}}
function(v0){return function(v0){return v0(v0(v0(v0(v1))))}}
That is, the first line shows the original source of the function n2, and the second one shows the source of the function that is returned by the evaluation of n2(n2).
I've managed to implement it as follows:
function source(f){
var nextVarId = 0;
return (function recur(f){
if (typeof f === "function"){
if (f.isVarFunc) return f(null);
else {
var varName = "v"+(nextVarId++);
var varFunc = function rec(res){
var varFunc = function(arg){
return arg === null
? "("+res.join(")(")+")"
: rec(res.concat(recur(arg)));
};
varFunc.isVarFunc = true;
return varFunc;
};
varFunc.isVarFunc = true;
var body = f(varFunc([varName]));
body = body.isVarFunc ? body(null) : recur(body);
return "(function("+varName+"){return "+body+"})";
};
} else return f;
})(f);
};
The issue is that I'm using some rather ugly method of tagging functions by setting their names to a specific value, and that it won't work in functions that are applied more than once (such as a(b)(b)). Is there any better principled way to solve this problem?
Edit: I managed to design a version that seems to be correct in all cases, but it is still an ugly unreadable unprincipled mess.

Finally, this is a considerably cleaned up version of the mess above.
// source :: PureFunction -> String
// Evaluates a pure JavaScript function to normal form and returns the
// source code of the resulting function as a string.
function source(fn){
var nextVarId = 0;
return (function normalize(fn){
// This is responsible for collecting the argument list of a bound
// variable. For example, in `function(x){return x(a)(b)(c)}`, it
// collects `a`, `b`, `c` as the arguments of `x`. For that, it
// creates a variadic argumented function that is applied to many
// arguments, collecting them in a closure, until it is applied to
// `null`. When it is, it returns the JS source string for the
// application of the collected argument list.
function application(argList){
var app = function(arg){
return arg === null
? "("+argList.join(")(")+")"
: application(argList.concat(normalize(arg)));
};
app.isApplication = true;
return app;
};
// If we try to normalize an application, we apply
// it to `null` to stop the argument-collecting.
if (fn.isApplication)
return fn(null);
// Otherwise, it is a JavaScript function. We need to create an
// application for its variable, and call the function on it.
// We then normalize the resulting body and return the JS
// source for the function.
else {
var varName = "v"+(nextVarId++);
var body = normalize(fn(application([varName])));
return "(function("+varName+"){return "+body+"})";
};
})(fn);
};
It is still not perfect but looks much better nether less. It works as expected:
console.log(source(function(a){return function(b){return a(b)}}))
Outputs:
(function(v0){return (function(v1){return (v0)((v1))})})
I wonder how inefficient that is, though.

understanding the code from transit.js

I was just going through the source of transit.js and came across the following fucntion ::
$.cssHooks['transit:transform'] = {
// The getter returns a `Transform` object.
get: function(elem) {
return $(elem).data('transform') || new Transform();
},
// The setter accepts a `Transform` object or a string.
set: function(elem, v) {
var value = v;
if (!(value instanceof Transform)) {
value = new Transform(value);
}
// We've seen the 3D version of Scale() not work in Chrome when the
// element being scaled extends outside of the viewport. Thus, we're
// forcing Chrome to not use the 3d transforms as well. Not sure if
// translate is affectede, but not risking it. Detection code from
// http://davidwalsh.name/detecting-google-chrome-javascript
if (support.transform === 'WebkitTransform' && !isChrome) {
elem.style[support.transform] = value.toString(true);
} else {
elem.style[support.transform] = value.toString();
}
$(elem).data('transform', value);
}
};
I understand the latter part of the function, but its really hard to understand the initial part of the function, the function can be found on git too , HERE .
Initially I see this, $.cssHooks['transit:transform'] what is that line really saying?
After that we have the below line of code I.E. the getter and setter method,
set: function(elem, v) {
But who is passing the elem and v inside the function, I don't see anything being passed?

Read about cssHooks at jQuery cssHooks
Look at the source code (search for hooks.get and hooks.set)
.cssHooks is an array of objects that contains getter and setters tha will be executed by .css(). Thats all.
$.cssHooks['transit:transform'] = {set: function(elem,value){}, get: function(elem){}}
equal:
$.cssHooks['transit:transform'] = {};
$.cssHooks['transit:transform'].set = function(elem, value){};
$.cssHooks['transit:transform'].get = function(elem){};
$(element).css('transit:transform',value)
comes to:
$.cssHooks['transit:transform'].set(element,value)
$(element).css('transit:transform')
comes to:
$.cssHooks['transit:transform'].get(element)
$.cssHooks['transit:transform'] = {set:function(){}, get: function(){} }
{...} is an object creation.get and set not executed at this moment.
They created {set:function(){}, get: function(){} }
So. Simply: .css() will execute set and get functions for hooked property.
If you want to know how real getters and setters works:
Object.defineProperty()

In Javascript, you can add/access to a property with this syntax :
myObject.myProperty
or with this syntax :
myObject['myProperty']
This is the same result
So your line
$.cssHooks['transit:transform']
just mean that we want to store an object (code between {} in your original post) inside the 'transit:transform' property which is inside the cssHooks property which is inside the $ object
This is the same things :
$['cssHooks']['transit:transform']
The reason why they use the [''] syntax is that transit:transform contains the ':' char which is not allowed if you want to access it this way :
$.cssHooks.transit:transform //doesn't work
EDIT:
To answer to your second question, i don't know...the code you are showing is just the 'description' of the "transit:transform' property

Trouble referencing variable in Collections.where method within render function

I have run into some trouble with a piece of backbone code. The code below relates to a render function. I can retrieve all the models. My trouble arises when I try to use the "Collections.where" method at line marked number #1. As you can see, I have passed an object literal into the render function but for some reason I am unable to reference it within the customers.where method on line #1. When I give this method a literal number like 45 it works. Is there some way around this so I can pass the variable reference in?
Thanks alot
render: function(options) {
var that = this;
if (options.id) {
var customers = new Customers();
customers.fetch({
success: function (customers) {
/* #1 --> */ var musketeers = customers.where({musketeerId: options.id});
console.log(musketeers.length) //doesn't work as options.id is failing on last line
var template = _.template($('#customer-list-template').html(), {
customers: customers.models
});
that.$el.html(template);
console.log(customers.models);
}
});
} else {
var template = _.template($('#customer-list-template').html(), {});
that.$el.html(template);
}
}

Although it isn't explicitly documented, Collection#where uses strict equality (===) when searching. From the fine source code:
where: function(attrs, first) {
if (_.isEmpty(attrs)) return first ? void 0 : [];
return this[first ? 'find' : 'filter'](function(model) {
for (var key in attrs) {
if (attrs[key] !== model.get(key)) return false;
}
return true;
});
},
note the attrs[key] !== model.get(key) inside the callback function, that won't consider 10 (a probable id value) and '10' (a probable search value extracted from an <input>) to be a match. That means that:
customers.where({musketeerId: 10});
might find something whereas:
customers.where({musketeerId: '10'});
won't.
You can get around this sort of thing with parseInt:
// Way off where you extract values from the `<input>`...
options.id = parseInt($input.val(), 10);

Returning a JSON object from a Javascript function

Trying to parse through some livestream JSON data and see if an event has a specific tag.
If it doesn't then I'll use that data to output values, etc.
For whatever reason, upcoming_event isn't being assigned the event object (which is the return value of the findPublicEvent function.
The console.log of the event object works fine - but returning it doesn't work :/
// get our NLC data from livestream.
// -> note: need the '?callback=?' to convert to JSONP for cross-domain usage
var $uri = 'http://api.new.livestream.com/accounts/newlifechurchtv/?callback=?';
$.getJSON($uri, function(data) {
parseNLCData(data);
});
parseNLCData = function(nlc_data){
// set our variable to the return first event
// nlc_data.upcoming_events.data is a json array of events
window.upcoming_event = findPublicEvent(nlc_data.upcoming_events.data);
}
// should return single public event
function findPublicEvent (all_events) {
// if we have events
if (all_events) {
// loop through events to find public event
$.each(all_events, function(index,value){
// get all the tags, remove whitespace, and put into array
var $tags = value.tags.replace(/ /g, '').toLowerCase().split(',');
// check for privacy.
var $privacy = $.inArray('private', $tags);
if ($privacy === -1) {
// if the event isn't private -> return it!
console.log(value);
return value;
}
});
// otherwise .... ->
} else {
// we don't have events, sooo, no dice.
return false;
}
};

findPublicEvent isn't returning it. The anonymous function you pass to each is returning it.
Since it is the return value of findPublicEvent that you are capturing, you can't see it.
Define a variable in the scope of findPublicEvent
Assign a value to it from inside your anonymous function (using a regular assignment, not a return)
Return that variable from findPublicEvent