We Keep Coding

set property of js module with nested callback

Im trying to set a modules variable/property from a nested function (basically a xhr callback (Api.get()) inside that module (in the init() function), but it does not work and I can not figure out why.
//posts
var Posts = (function() {
//array of all posts objects
var data = null;
//initialize the posts module
var init = function(callback) {
if(data === null) {
//load all posts
loadAll(function(response){
// data = JSON.parse(response)
var posts = JSON.parse(response)
//create array
data = posts;
// call callback
console.log(data)
callback()
})
}
}
// return all posts from api as json
var loadAll = function(callback) {
Api.get('/api/posts/get', function(response) {
callback(response)
})
}
//public interface
return {
data: data,
init: init,
loadAll: loadAll
}
})();
After calling Posts.init() I log Posts.data to the console, but it is still null. However, console.log(data) inside the init() method logs the expected array of objects im trying to assign to Posts.data. It seems that data inside the callback is another variable than Posts.data. Can someone please explain why and if possible, provide a solution for setting the modules data property inside Api.get()?

You need to have a reference to the return object so you can alter its data property after you've returned the object. One way to do this would be to create an object with the methods and data and return that object. Then you can refer to its data property internally with this.data:
// Fake API
let Api = {
get(url, cb) {
cb('["testdata"]')
}
}
//posts
var Posts = (function() {
//array of all posts objects
return {
data: null,
init(callback) {
if (this.data === null) {
//load all posts
this.loadAll((response) => { // arrow function needed here for correct `this` binding
var posts = JSON.parse(response)
//create array
this.data = posts; // add data
callback()
})
}
},
loadAll(callback) {
Api.get('/api/posts/get', function(response) {
callback(response)
})
}
}
})();
console.log("initial posts data: ", Posts.data)
Posts.init(() => console.log("After init():", Posts.data))
If you do it this way, you don't actually need the IEFE unless you plan on making multiple objects. You can just use Posts = {/* rest of the data and methods */}. This would also work well as a class instead of a plain object.

Creating a module on JS that have to get data from a RESTFUL API

Hi I was creating a JS module that I want to use in the way:
var dataCollection = new dataCollectionSetup();
var collectedData = dataCollection.getMeasures(2);
My issue is that I want to get data from a Restfull Api and that will be asynchronously. I create this module but I am stuck on how create the promise inside the function or something that allow me call the getMeausre in the way that I showed or like this dataCollection.getMeasures(2).then(UpdatecoolectedData(res)).
var dataCollectionSetup = function () {
var getMeasuresByTrainingDomainId = function (tdId)
{
var jsonResponse;
fnSuccess = function (data, status, request) {
jsonResponse = data;
return jsonResponse
};
fnError = function () {
alert("Error getting Maasures by Training Domain");
}
$.ajax({
type: "GET",
url: "/datacollection/Measures/" + timelineId,
complete: fnSuccess,
error: fnError
});
}
var getMetrics = function () {
var result = CallApiForMetrics()
return result;
}
return {
getMeasures: getMeasuresByTrainingDomainId,
getNetric: getMetrics
}
}
Thank you

Just make the following change to your function getMeasuresByTrainingDomainId
return $.ajax({
type: "GET",
url: "/datacollection/Measures/" + timelineId,
complete: fnSuccess,
error: fnError
});
If you look the jquery documentation for the ajax method, implement the Promise interface, and you can use it like this:
var dataCollection = dataCollectionSetup();
dataCollection.getMeasures(2).then(function(){/*your coode*/})

Fetch data on different server with backbone.js

I can't see what the problem with this is.
I'm trying to fetch data on a different server, the url within the collection is correct but returns a 404 error. When trying to fetch the data the error function is triggered and no data is returned. The php script that returns the data works and gives me the output as expected. Can anyone see what's wrong with my code?
Thanks in advance :)
// function within view to fetch data
fetchData: function()
{
console.log('fetchData')
// Assign scope.
var $this = this;
// Set the colletion.
this.collection = new BookmarkCollection();
console.log(this.collection)
// Call server to get data.
this.collection.fetch(
{
cache: false,
success: function(collection, response)
{
console.log(collection)
// If there are no errors.
if (!collection.errors)
{
// Set JSON of collection to global variable.
app.userBookmarks = collection.toJSON();
// $this.loaded=true;
// Call function to render view.
$this.render();
}
// END if.
},
error: function(collection, response)
{
console.log('fetchData error')
console.log(collection)
console.log(response)
}
});
},
// end of function
Model and collection:
BookmarkModel = Backbone.Model.extend(
{
idAttribute: 'lineNavRef'
});
BookmarkCollection = Backbone.Collection.extend(
{
model: BookmarkModel,
//urlRoot: 'data/getBookmarks.php',
urlRoot: 'http://' + app.Domain + ':' + app.serverPort + '/data/getBookmarks.php?fromCrm=true',
url: function()
{
console.log(this.urlRoot)
return this.urlRoot;
},
parse: function (data, xhr)
{
console.log(data)
// Default error status.
this.errors = false;
if (data.responseCode < 1 || data.errorCode < 1)
{
this.errors = true;
}
return data;
}
});

You can make the requests using JSONP (read about here: http://en.wikipedia.org/wiki/JSONP).
To achive it using Backbone, simply do this:
var collection = new MyCollection();
collection.fetch({ dataType: 'jsonp' });
You backend must ready to do this. The server will receive a callback name generated by jQuery, passed on the query string. So the server must respond:
name_of_callback_fuction_generated({ YOUR DATA HERE });
Hope I've helped.

This is a cross domain request - no can do. Will need to use a local script and use curl to access the one on the other domain.

AngularJS : having problems with $scope,factory returns

Im learning AngularJs.
And I find my self enjoying it, But im stuck with this code
my controller
$scope.getQuestionaires = function(){
var formdata = $scope.formdata;
var items = parseInt(formdata.items);
var num_letter = parseInt(formdata.num_letter);
var num_missing_letter = parseInt(formdata.num_missing_letter);
var send_data = {
api_type: 'select',
tb_name: 'tb_spelling',
tb_fields: false,
tb_where: false,
tb_others: "LIMIT "+items
};
return factory.getRecords(send_data);
}
my factory
factory.getRecords = function(data) {
return $http.post('models/model.php', {
params: data
}).then(function(response) {
records = response.data;
return records;
});
};
Situation : When I console.log($scope.getQuestionaires), It returns
function (b,j){var
g=e(),i=function(d){try{g.resolve((b||c)(d))}catch(e){a(e),g.reject(e)}},o=function(b){try{g.resolve((j||
d)(b))}catch(c){a(c),g.reject(c)}};f?f.push([i,o]):h.then(i,o);return
g.promise} controllers.js:307 function (a){function b(a,c){var
d=e();c?d.resolve(a):d.reject(a);return d.promise}function d(e,f){var
j=null;try{j=(a||c)()}catch(g){return b(g,!1)}return
j&&j.then?j.then(function(){return b(e,f)},function(a){return
b(a,!1)}):b(e,f)}return this.then(function(a){return
d(a,!0)},function(a){return d(a,!1)})} controllers.js:307
[Object, Object, Object, Object]
Question : My problem is that i only want the array of objects, how can i do that? I think theres a lot i got to improve about my code...I need help :)
Thx
====================================
Fixed
Thx to Chandermani's answer,
Got it!
My controller
$scope.createTest = function(){
$scope.getQuestionaires();
}
/*question getter*/
$scope.getQuestionaires = function(id,question){
/*send_data here*/
var records = factory.getRecords(send_data);
records.then(function(response){
$scope.questionaires = response.data;
});
}
My factory
factory.getRecords = function(data) {
return $http.post('models/model.php', {
params: data
});
};

The method getQuestionaires returns response for your $http post method which is a promise and not the actual data, since the call is async.
Change the method getRecords to
factory.getRecords = function(data) {
return $http.post('models/model.php', {
params: data
});
};
When you call the method getQuestionaires do something like
$scope.getQuestionaires().then(function(response){
//access response.data here
});
Try to understand the async nature of such request. If you ever call async methods within your own functions you can access the response by either returning the promise or provide a callback as a argument to the function.

Javascript "push" into array not working (Facebook app)

I am trying to store my friends list (name, picture and gender) on a var, but it doesn't work correctly. Please ready the comments in the code for the details. Any ideas? Thanks.
function getFriendsArray() {
var friendsArray = [];
FB.api('/me/friends?fields=name,picture,gender', function(response) {
if(response.data) {
var data = '';
$.each(response.data, function(indice, item) {
alert(item.name); // Friend's name are displayed correctly
friendsArray.push(item); // I believe this doesn't work
});
}
else {
errorHandler('getFriendsArray', JSON.stringify(response));
}
});
alert(friendsArray.length); // Returns 0 (incorrect)
return friendsArray.sort(sortByName);
}

The call function(response) is asynchronous. You should insert the alert after $.each
for completeness: you should change your approach to problem: do not call a function that returns an Array but that call a second function.
function getFriendsArray(callback, errorHandler) {
var friendsArray = [];
FB.api('/me/friends?fields=name,picture,gender', function(response) {
if(response.data) {
var data = '';
$.each(response.data, function(indice, item) {
alert(item.name); // Friend's name are displayed correctly
friendsArray.push(item); // I believe this doesn't work
});
callback(friendsArray);
}
else {
errorHandler('getFriendsArray', JSON.stringify(response));
}
});
}
getFriendsArray(function(friends) {
alert(friends);
},
function(error) {
alert('error');
});

It looks like the FB.api makes an asynchronous request (like jQuery.ajax) and so you are executing alert(friendsArray.length) before the FB.api call completes and pushes the results into the friends array.