javascript - how to make synchronous call to json data from angularjs -
i calling data json file in angularjs due asynchronous call code moving other step before receiving data causing error. used $http.get
$http.get('job.json').success(function (response) { $scope.big = response; }); can suggest synchronous method call json data
{ "days": [{ "dayname": "sun,23 aug 2015", "date": "2015-08-23", "hours": "hoursarray(array24)" }, { "dayname": "mon,24 aug 2015", "date": "2015-08-24", "hours": "hoursarray(array24)" }, { "dayname": "tue,25 aug 2015", "date": "2015-08-25", "hours":"hoursarray(array24)" }, { "dayname": "wed,26 aug 2015", "date": "2015-08-26", "hours": "hoursarray(array24)" }] } this jquery file using
(function($) { $.fn.schedule = function(options) { var methods = { init : function(ele, opt) { //methods.currentdate = methods.now.getfullyear() + "engine change" + methods.now.getmonth() + "engine change" + methods.now.getdate(); methods.currentdate = methods.now.getfullyear() + "-" + methods.now.getmonth() + "-" + methods.now.getdate(); // $("#schedulealldays > *").each(function(){ // var item = $(this); // $("#schedulealldays").width($("#schedulealldays").width()+item.width()); // }); // $("#schedulealldays").width($("#schedulealldays").width()); ele.find("[data-row]").each(function() { var drow = $(this), drowset = $("[data-row='" + drow.data("row") + "']"); var maxheight = methods.elesmaxheight(drowset); drowset.height(maxheight); }); methods.allocatedurations(ele); $("#schedulecontentinner", ele).css("min-height", $(".schedule-drag-wrap", ele).innerheight()); }, elesmaxheight : function(ele) { var heights = $(ele).map(function() { return $(this).height(); }).get(); return math.max.apply(null, heights); }, allocatedurations : function(ele) { methods.flightdata = { routes : {} }; ele.find("[data-flight-row]").each(function(i, ival) { var flight = $(this); methods.flightdata.routes["row" + i] = []; flight.find("[data-flight-record]").each(function() { var currentflight = $(this), flightrecord = methods.makestringtoobject(currentflight.data("flight-record")); flightrecord.element = currentflight; methods.flightdata.routes["row" + i].push(flightrecord); }); }); methods.positionset(ele); }, positionset : function(ele) { var dayelement = $("#schedulealldays > *", ele); var totaldaywidth = $("#schedulealldays").width() + 30; var totaldays = dayelement.size(); var totalseconds = (((totaldays * 24) * 60) * 60); var persecondswidth = number(totaldaywidth / totalseconds); var divider = $(".schedule-h-divider"); dayelement.each(function(i, ival) { var dayele = $(this), dividerele = divider.eq(i); dividerele.css({ top : $("#schedulealldays").height(), left : dayele.offset().left - 104 }); }); for (var in methods.flightdata.routes) { var iobj = methods.flightdata.routes[i]; for (var j in iobj) { var jobj = iobj[j]; var duration = jobj.duration, width = number(methods.hmtosec(duration, ".") * persecondswidth); var parent = jobj.element.parent(); jobj.element.css({ // position : "relative", width : width + "px", overflow : "hidden", "white-space" : "nowrap" }).parent().css({ // width : width+"px", // overflow : "hidden" // position:"absolute", left : (j==0)?0:parent.prev().position().left+parent.prev().width() }); } } methods.draginit(ele); }, setcurrenttimemarker : function(ele) { var marker = $(".schedule-current-time-marker"); var markerpills = $(".schedule-time-marker-pills"); var dayelement = $("#schedulealldays > *", ele); var totaldaywidth = $("#schedulealldays").width() + 30; var totaldays = dayelement.size(); var totalseconds = (((totaldays * 24) * 60) * 60); var persecondswidth = number(totaldaywidth / totalseconds); var currentdate = new date(); var format = currentdate.getfullyear() + "engine change" + currentdate.getmonth() + "engine change" + currentdate.getdate(); var currentdateele = $("#schedulealldays").find("[data-date='" + format + "']"); var days = (currentdateele.index()), seconds = ((days * 24) * 60) * 60; seconds = seconds + methods.hmtosec(currentdate.gethours() + "." + currentdate.getminutes(), "."); marker.stop().animate({ top : $("#schedulealldays",ele).height()-53, left : (seconds * persecondswidth) - (marker.width() / 2) }, 1000, "swing"); markerpills.html(currentdate.gethours() + ":" + currentdate.getminutes()); methods.markermove = setinterval(function() { currentdate = new date(); marker.css({ left : marker.position().left + persecondswidth }, "fast", "swing"); markerpills.html(methods.makezerodigit(currentdate.gethours()) + " : " + methods.makezerodigit(currentdate.getminutes())); // methods.schedulemove(ele,persecondswidth); }, 1000); }, schedulemove : function(ele,seconds) { var dragwrap = ele.find(".schedule-drag-wrap"); var routewidth = $(".schedule-route:eq(0)").width() + $(".schedule-route:eq(1)").width(); var maxleft = -(dragwrap.width() - ($(window).width() - routewidth)); if (math.abs(dragwrap.position().left) < math.abs(maxleft)) { dragwrap.css({ left : (dragwrap.position().left - (dragwrap.width)) + "px" }); } }, makezerodigit : function(digit) { return (string(digit).match(/^[0-9]$/)) ? "0" + digit : digit; }, draginit : function(ele) { var currentdaycol = $("[data-date='" + methods.currentdate + "']"); ele.find(".schedule-drag-wrap").css({ left : -(currentdaycol.position().left - 50) + "px" }).animate({ left : -currentdaycol.position().left - 0 + "px" }, 1000, "swing", function() { methods.drag(ele); methods.setcurrenttimemarker(ele); }); }, drag : function(ele) { methods.move = null; $(".schedule-drag-wrap", ele).on("mousedown", function(e) { var dragele = $(this), position = dragele.position(); methods.move = { x : e.pagex, y : e.pagey, left : position.left }; }).on("mouseup mouseleave", function(e) { var dragele = $(this); if (methods.move) { methods.move = null; dragele.removeclass("userselect-none cursor-move"); } }).on("mousemove", function(e) { var dragele = $(this), position = dragele.position(), movedx, drag = true; if (methods.move) { methods.curmove = { x : e.pagex, y : e.pagey }; var routewidth = $(".schedule-route:eq(0)").width() + $(".schedule-route:eq(1)").width(); var maxleft = -(dragele.width() - ($(window).width() - routewidth)); var xcondition = (methods.move.x > methods.curmove.x); dragele.addclass("userselect-none cursor-move"); if (position.left <= maxleft && xcondition) { drag = false; dragele.css({ left : maxleft }); } if (position.left > -10 && !xcondition) { drag = false; dragele.css({ left : 0 }); } if (drag) { //if direction right left movedx = methods.move.left + (methods.curmove.x - methods.move.x); dragele.css({ left : movedx }); } } }); }, now : new date(), currentdate : "", hmtosec : function(hours, identy) { var s = (hours.match(/\./)) ? hours.split(identy) : [hours, 0], h = s[0], m = s[1]; h = (number(h)) ? (h * 60) * 60 : 0; m = (m == 0) ? 0 : m * 60; return number(h + m); }, makestringtoobject : function(string) { var loc_string = string(string).split("|"); var output = {}; for (var in loc_string) { var keyvalue = loc_string[i].split("~"); output[keyvalue[0]] = keyvalue[1]; } return output; } }; return this.each(function() { methods.init($(this), $.extend({}, $.fn.schedule.setting, options)); }); }; $.fn.schedule.setting = {}; })(jquery);
in service: var deferred = $q.defer(); $http.get('job.json') .success(function(response) { defer.resolve(response); }).error(function(error){ console.log(error); }) return deferred.promise;
in controller:
var p=<servicecall> p.then(function(s){ $scope.ans=s; }) the $q used getting synchronous response.for more details:https://docs.angularjs.org/api/ng/service/$q
Comments
Post a Comment