I am playing with modules in Dojo 1.8 and I have a module defined like this:
define(["dojo/request/xhr", "dojo/json"],
function(xhr, JSON) {
var url = "server/provider.php";
return {
files: {},
getDirList: function() {
var self = this;
xhr(url).then(function(response) {
response = JSON.parse(response);
// would love to return the JSON for use here
}, function(err) {
console.error(err);
});
}
};
});
I have another module in which I'd love to call that method and then use it:
define(["dojo/dom",
"dojo/dom-construct",
"dojo/_base/array",
"afm/utils"
],
function(dom,domConst,array, utils) {
return {
produceHtml: function() {
var json = utils.getDirList(); //this returns undefined
var dirLength = json.length;
console.log(json);
for (var i = 0; i < json.length; i++) {
if(i % 2 === 0) {
domConst.place('<tr class="even"><td>' + json[i].name + '</td></tr>', 'output');
} else {
domConst.place('<tr><td>' + json[i].name + '</td></tr>', 'output');
}
}
}
};
});
Naturally I could just put the DOM creation code INTO the util module, but that is mixing view logic where it shouldn't be. And it's hideous if I want to reuse the util.getDirList method.
How can I use the JSON that gets returned by that method? Is anyone else doing this?
The result of the dojo/request/xhr call comes in asynchronously, so setting the response parameter is done only after returning.
What you want is return a Promise (read up here: http://dojotoolkit.org/documentation/tutorials/1.8/promises/ ).
But first of all: you can make the dojo/request parse the json data for you, as follows:
require(['dojo/request'],function(request) {
request.get('http://example.com/data.json', {handleAs:'json'}).then(...)
})
See here: http://dojotoolkit.org/reference-guide/1.8/dojo/request.html#dojo-request
Now combining this, your getDirList function could be just:
getDirList: function() {
return xhr.get(url, {handleAs:'json'});
}
And then in your produceHtml you would do something like this:
utils.getDirList.then(function(json) {
for (var i = 0; i < json.length; i++) {
if(i % 2 === 0) {
domConst.place('<tr class="even"><td>' + json[i].name + '</td></tr>', 'output');
} else {
domConst.place('<tr><td>' + json[i].name + '</td></tr>', 'output');
}
});
In your second module, shouldn't
define(["dojo/dom",
"dojo/dom-construct",
"dojo/_base/array",
"afm/utils"
],
function(dom,domConst,array) {
become
define(["dojo/dom",
"dojo/dom-construct",
"dojo/_base/array",
"afm/utils"
],
function(dom,domConst,array, utils) {
?
Related
I have a bunch of data on JSON using LocalStorage from ng-storage like this,
[Object { judul="Just", isi="Testing"}, Object { judul="To", isi="Get"}, Object { judul="Specific", isi="Data"}]
but I want to get one specific data to get the "isi" value, how to do that ?
You can do this by adding a get function to your factory
for example :
.factory ('StorageService', function ($localStorage) {
$localStorage = $localStorage.$default({
things: []
});
var _getAll = function () {
return $localStorage.things;
};
//-----
var _get = function (isi) {
for( var i = 0; i < $localStorage.things.length ; i++ ){
if( $localStorage.things[i].isi === isi ){
return $localStorage.things[i];
}
}
}
return {
getAll: _getAll,
get : _get
};
})
and in your controller you can get the specific data by passing the id of your object
var objectInlocal = StorageService.get(Thing.isi);
I'm trying to use promise to get in promise2
But if I have an object Widgets with several elements in it...
Why can't I have been able to get my console.log's output
Parse.Cloud.define("extract", function(request, response) {
var user = request.params.user;
var promise = Parse.Promise.as();
[...]
}).then(function() {
return query.find().then(function(results) {
_.each(results, function(result) {
[...]
Widget.objectId = result.id;
Widgets[timestamp] = Widget;
});
return promise;
}).then(function(results) {
for (var key in Widgets) {
var Widget = Widgets[key];
var widget_data = Widgets[key].widget_data;
var promise2 = Parse.Promise.as();
promise2 = promise2.then(function() {
return Parse.Cloud.run('extractWidgetData', {
'widget_data': widget_data,
}).then(function(newresult) {
Widgets[key].data = newresult.data;
console.log('--------WHY NOT HERE ALL TIME ?--------');
});
});
return promise2;
}
}).then(function() {
response.success(Widgets);
},
function(error) {
response.error("Error: " + error.code + " " + error.message);
});
});
});
I'm becoming crazy to run this damn Code
EDIT : I finally followed Roamer's advices to implement something but I'm not sure if it's the good way to work with Promise in series...
Parse.Cloud.define("extract", function(request, response) {
var user = request.params.user;
var Widgets = {};
...
... .then(function() {
return query.find().then(function(results) {
return Parse.Promise.when(results.map(function(result) {
var Widget = ...;//some transform of `result`
Widget.id = ...;//some transform of `result`
var timestamp = createdAtDate.getTime();
...
return Parse.Cloud.run('extractData', {
'widget_data': Widget.widget_data,
}).then(function(newresult) {
Widget.stat = newresult.stats;
return Widget;//<<<<<<< important! This ensures that results.map() returns an array of promises, each of which delivers a Widget objects.
});
}));
}).then(function() {
var promisedWidget = Array.prototype.slice.apply(arguments);
return Parse.Promise.when(promisedWidget.map(function(Widget) {
return Parse.Cloud.run('getWineStats', {
'id': Widget.data.id
}).then(function(stat) {
Widget.stat = stat;
return Widget;
});
}));
}).then(function() {
var promisedWidget = Array.prototype.slice.apply(arguments);
_.each(promisedWidget, function(Widget) {
var createdAtObject = Widget.createdAt;
var strDate = createdAtObject.toString();
var createdAtDate = new Date(strDate);
timestamp = createdAtDate.getTime();
Widgets[timestamp] = Widget;
});
return Widgets;
}).then(function(Widgets) {
response.success(Widgets);
},
function(error) {
response.error("Error: " + error.code + " " + error.message);
});
});
});
First, I echo Bergi's comment on indentation/matching parenthesis.
But ignoring that for a moment, at the heart of the code you have return query.find().then(...).then(...).then(...) but the flow from the first .then() to the second is incorrect. Besides which, only two .then()s are necessary as the code in the first then is synchronous, so can be merged with the second.
Delete the two lines above for (var key in Widgets) { then at least Widgets will be available to be processed further.
Going slightly further, you should be able to do all the required processing of results in a single loop. There seems to be little pont in building Widgets with _.each(...) then looping through the resulting object with for (var key in Widgets) {...}.
In the single loop, you probably want a Parse.Promise.when(results.map(...)) pattern, each turn of the map returning a promise of a Widget. This way, you are passing the required data down the promise chain rather than building a Widgets object in an outer scope.
Do all this and you will end up with something like this :
Parse.Cloud.define("extract", function(request, response) {
var user = request.params.user;
...
... .then(function() {
return query.find().then(function(results) {
return Parse.Promise.when(results.map(function(result) {
var Widget = ...;//some transform of `result`
...
return Parse.Cloud.run('extractWidgetData', {
'widget_data': Widget.widget_data,
}).then(function(newresult) {
Widget.data = newresult.data;
return Widget;//<<<<<<< important! This ensures that results.map() returns an array of promises, each of which delivers a Widget objects.
});
}));
}).then(function() {
//Here, compose the required Widgets array from this function's arguments
var Widgets = Array.prototype.slice.apply(arguments);//Yay, we got Widgets
response.success(Widgets);
}, function(error) {
response.error("Error: " + error.code + " " + error.message);
});
});
});
I've written a function to call the default jQuery.fn.on-handler, after a given number of fired events. Now I stuck, because the original event will not passed to the function, any ideas how to improve this?
;(function ($) {
var oldOn = $.fn.on,
i = 0;
$.fn.on = function () {
var args = arguments,
j = args.length;
for (var last in args);
while (j--) {
if ($.isFunction(args[j]) && !isNaN(args[last])) {
var oldFn = args[j],
after = args[last];
args[j] = function () {
i++;
if (i === after) {
oldFn.call();
i = 0;
}
};
}
}
if (!isNaN(args[last])) delete args[last];
return oldOn.apply(this, arguments);
};
})(jQuery);
// call the plugin and fire the `fn` after each 20 mousemoves
$(document).on('mousemove', function (e) {
console.log(e); // undefined
}, 20);
As you can see, will the following work without problems:
var oldOn = $.fn.on;
$.fn.on = function () {
return oldOn.apply(this, arguments);
};
$(document).on('click', function(e){
console.log(e) // jQuery.Event
});
Where's the mistake, how can i get this to work?
Update
I got it much simpler now: https://github.com/yckart/jquery.unevent.js
You're not passing the arguments from your callback wrapper function to the original callback function.
args[j] = function (*HERE*) {
i++;
if (i === after) {
oldFn.call(*TO HERE*);
i = 0;
}
};
Try replacing oldFn.call(); with oldFn.apply(this, [].slice.call(arguments)); to carry them over (and keeping up jQuery's this).
Edit: http://jsfiddle.net/QFyhX/
I think
for (var last in args);
should be
var last = args[args.length-1];
Having problem with prototype ajax and setTimeout. Here is my code shortened:
//new ajax request
....onComplete: function (transport) { //json as this -> array[$i].something
var json = transport.responseJSON;
var $i = 0;
window.setTimeout(function () {
SLOW();
},
500); //display every json[$i] with custom delay
function SLOW() {
$i++;
if (json[$i].something !== null) { //insert in proper div id in the html document
window.setTimeout(function () {
$('document_div' + json[$i].something).innerHTML = json[$i].something_to_display;
},
500);
window.setTimeout(function () {
$('document_div' + json[$i].something).innerHTML = json[$i].something_to_display;
},
1000);...window.setTimeout(function () {
SLOW();
},
500);
} else {
//stop and continue
}
Getting this error: json[$i] is undefined.
EDIT: looks like i'm getting this error on second timeout, the first one changes the div correctly.
Done.
Solution was to re-var json again before using it in setTimeout.
var json_something = json[$i].something; //and so on...
var json_something_to_display = json[$i].something_to_display
window.setTimeout(function() { $('document_div'+json_something).innerHTML = json_something_to_display; }, 500);
Can somebody explain why this is needed? Why varing json is not enough and it disapears somewhere after one window.setTimeout function?
I'm a little new to JSON so trying to understand what is the best way to do this. I have two variables: postcode and energyrating that I want to put into JSON and then parse to a for loop.
I can get it to work with one variable but when I have two it doesn't work.
Here is my JSON:
header('Content-type: application/json');
$postcodeArray = array('postcodes' => array("E6 2JG","SE1 2AQ","DA1 1DZ"), 'energyrating' => array("A","B","C","D","E","F","G"));
die(json_encode($postcodeArray));
Here is my jQuery:
function addNew(postcodes) {
if(postcodes.length > 0) {
for(var i = 0; i < postcodes.length; i++) {
var address = postcodes[i];
var rating = energyrating[i];
geocoder.geocode( { 'address': address }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var image = '../img/markers/' + rating + '.png';
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
icon: image
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
} else {
alert("Sorry, no data was found.");
}
}
How do I get this to work with both variables?
What does not work exactly ?
Reading your code, I would say there is an error into your code. The energyrating argument is missing into your addNew function:
function addNew(postcodes, energyrating) {
Assuming that you call your function like this:
addNew(jsonData.postcodes, jsonData.energyrating);
Use json variables to store the data like that :
$postcodeArray = '{"postcodes":{"0":E6, "1":"2JG", "3":"SE1 2AQ","4":"DA1 1DZ"}, "energyrating":{"0":"A","1":"B","2":"C","3":"D","4":"E","5":"F","6":"G"}}';
In the place of
$postcodeArray = JSON.parse('postcodes' => array("E6 2JG","SE1 2AQ","DA1 1DZ"), 'energyrating' => array("A","B","C","D","E","F","G"));
And you can access the values.
Or try json_decode(postcodes) in the function addNew in first line.