javascript - Using deeply nested object from JSON in AngularJS - strange behavior -

-

i'm trying understand how angularjs sees object nested json. here's example plunker. data comes service , assigned $scope.data. javascript code seems want me declare every level of object first before usage, referencing deep level within object view html works, , using deep level in function kinda works. it's rather inconsistent.

i'm not sure if understanding of $scope lacking, or if has promise objects. advise please?

html

<body ng-controller="mainctrl">   referencing nested obj in view works:   {{data.level1.level2}}   <br>   using nested obj within declared scope var doesn't work:   {{nestedobj}}   <br>   using nested obj in function works throws typeerror:   {{getlen()}} </body>

javascript

var app = angular.module('app', []);  app.factory('jsonsvc', function ($http) {   return {read: function(jsonurl, scope) {         $http.get(jsonurl).success(function (data, status) {             scope.data = data;         });     }}; });  app.controller('mainctrl', function($scope, jsonsvc) {     jsonsvc.read('data.json', $scope);      // using nested obj within declared scope var doesn't work     // uncomment below break whole app     // $scope.nestedobj = $scope.data.level1.level2;      // using nested obj in function works throws typeerror     // declaring $scope.data.level1.level2 = [] first helps here     $scope.getlen = function () {return $scope.data.level1.level2.length}; });

json

{     "level1": {         "level2": [             "a",             "b",             "c"         ]     } }

your $http request asynchronous.

app.controller('mainctrl', function($scope, jsonsvc) {     jsonsvc.read('data.json', $scope);      //$scope.data.level1.level2 doesn't exist yet @ point in time      //and throws exception     $scope.nestedobj = $scope.data.level1.level2;      //$scope.data.level1.level2 doesn't exist yet @ point in time      //and throws exception     //once angular dirty checking 1 work since      //$http request finished.     $scope.getlen = function () {         return $scope.data.level1.level2.length     }; });

since have 3 scope objects rely on data best assign in call back.

app.factory('jsonsvc', function ($http) {   return {read: function(jsonurl, scope) {         $http.get(jsonurl).success(function (data, status) {             scope.data = data;       scope.nestedobj = scope.data.level1.level2;       scope.getlen = function () {         return scope.data.level1.level2.length;       };         });     }}; });

if not want set on call back, use $broadcast() , $on()

app.factory('jsonsvc', function ($http, $rootscope) {     return {         read: function (jsonurl, scope) {             $http.get(jsonurl).success(function (data, status) {                 scope.data = data;                 $rootscope.$broadcast("jsondone");             });         }     }; });  app.controller('mainctrl', function ($scope, jsonsvc) {     jsonsvc.read('data.json', $scope);     $scope.name = "world";     $scope.$on("jsondone", function () {         $scope.nestedobj = $scope.data.level1.level2;         $scope.getlen = function () {             return $scope.data.level1.level2.length;         };     }); });

Comments

Post a Comment

Popular posts from this blog

Perl - how to grep a block of text from a file -

-
it can in xml or text format. how in general grep block of text in perl? <track type="ws"> <range> <rangestart>0</rangestart> <rangeend>146.912</rangeend> <locationindex>0</locationindex> <propertyindex>0</propertyindex> </range> </track> <track type="ps" id="1"> <range> <rangestart>0</rangestart> <rangeend>146.912</rangeend> <locationindex>1</locationindex> <propertyindex>1</propertyindex> </range> </track> i want grep type="ps" , till </range> . one solution open file, read line line , match block. open(fh, "file.txt"); foreach $line (<fh>) { if ($line =~ m/type="cc"(.*?)<\/range>/) { print $1; } } but there more optimal solution without reading file line l
Read more

delphi - How to remove all the grips on a coolbar if I have several coolbands? -

-
Image
if set mycoolbar.fixedorder true,only grip on first band hidden. well,if use delphi 7 create vcl forms application,then put coolbar on , create 3 coolbans hold other controls,only grip , top coolbands can hidden setting mycoolbar.fixedorder:=true. i've uploaded picture make things clear. you got fixedorder property wrong. fixed property not allow bands rearranged if set true . setting property of coolbar true keep user changing bands order @ runtime, user can still move , resize bands. can give advice can do, actual solution problem, well, have wait answer. my advice use 3 coolbars in row , setting "fixedorder" property true , bandborderstyle bsnone . way grip hidden on of them. about property, it's not bug of ide, actual preference of property.
Read more

javascript - Animating array of divs; only the final element is modified -

-
this baffling me @ moment. i'm experienced programmer looking throw bit of surprise fiancee on countdown page our wedding. desired effect simulated confetti falling behind main page. setup follows: i have array of divs in javascript. each div absolutely positioned on page. have interval set updates every 50 or milliseconds. on each tick, run loop on array of divs, , calculations , update positions. problem problem having, however, though can see divs created, stored array, , modified (in case, each has slight randomized rotation) during initialization phase, once tick update position starts, div stored in whatever last slot of array gets position updated. tried hard-coding each div index testing purposes, strictly last element update position. upon printing current "left" , "top" style values each div before , after calculations shows value has been changed, no visible change noticeable. here's basic code: javascript var container;
Read more