Jump to content

Object creating on the fly in JavaScript (using AngularJS)


Spunky
 Share

Recommended Posts

    var holdBuilding = $scope.m1Special.Buildings;    var c = 0;    $scope.m2Info = {};    $scope.m3Info = {};    $scope.m4Info = {};    $scope.m5Info = {};    $scope.m6Info = {};$scope.create2ndMap = function(){    $scope.m2Info[c]={        name:holdBuilding[c].name,        link:holdBuilding[c].link    };    c++;}$scope.create3rdMap = function(){    $scope.m3Info[c]={        name:holdBuilding[c].name,        link:holdBuilding[c].link    };    c++;}$scope.create4thMap = function(){    $scope.m4Info[c]={        name:holdBuilding[c].name,        link:holdBuilding[c].link    };    c++;}$scope.create5thMap = function(){    $scope.m5Info[c]={        name:holdBuilding[c].name,        link:holdBuilding[c].link    };    c++;}$scope.create6thMap = function(){    $scope.m6Info[c]={        name:holdBuilding[c].name,        link:holdBuilding[c].link    };    c++;}angular.forEach(holdBuilding,function(){    if($scope.m1Special.Buildings[c].loc=="Northern"){        $scope.create2ndMap();    }    else if($scope.m1Special.Buildings[c].loc=="Central"){        $scope.create3rdMap();    }    else if($scope.m1Special.Buildings[c].loc=="Western"){        $scope.create4thMap();    }    else if($scope.m1Special.Buildings[c].loc=="Eastern"){        $scope.create5thMap();    }    else if($scope.m1Special.Buildings[c].loc=="Southern"){        $scope.create6thMap();    };});    alert($scope.m3Info[0].name);

Anyone able to tell me why the alert on the bottom of the code breaks the AngularJS (shows interpolations instead of values) with an error of:

 

"Error: $scope.m3Info[0] is undefined

 

It does this for any alert of the above "objects" I created except for $scope.m2Info[0].name

 

For example, I can alert any item contained in m2Info (0,1,2) but none of the ones in m3Info, m4Info, etc...

 

I can, however, put an alert in the function like so:

alert($scope.m6Info[c].name);

And that will work, but not with a number. For m2Info it works with both a number and c.

 

Clearly the objects aren't being created quite the way I am expecting. Only m2Info is being created, whereas the others are lost after the function ends? I'm doing them exactly the same though, so not sure what is going awry..

Link to comment
Share on other sites

It does this for any alert of the above "objects" I created except for $scope.m2Info[0].name

That means that create2ndMap gets called first. You're using a single counter for all of these. If the first entry is Northern, then that will populate m2Info[0]. If the next entry is Eastern then it will populate m5Info[1]. If the next entry is Southern then it will populate m6Info[2], etc. You keep incrementing c when you add anything and it's a global counter, so all of those arrays combined are going to only have 1 entry for 0, 1 for 1, 1 for 2, etc. If you're trying to build the arrays so that the first entry in every info array is 0, then you should push items onto each array instead of using the counter as an index. You can use console.log($scope.m3Info) if you want to see which elements in that array have been populated.
Link to comment
Share on other sites

That's the ticket. I think my original intention was to clear the count everytime...but now I see how impossible/hard that would be. Push will work, but I have never done a "push" for this type of array before, how would that be set up? (since it is adding an entry for "name" and for "link".

Edited by Spunky
Link to comment
Share on other sites

Well this appears to be going well but for some reason it is only displaying the last item for each m#Info. And I cannot figure out how to debug this because when I do one of the following

alert($scope.m2Info[0].name);alert($scope.m2Info[c].name);

It comes up "undefined" for the entry. I thought that this is how to specify an item in an array??

Link to comment
Share on other sites

var holdBuilding = $scope.m1Special.Buildings;    var c = 0;    $scope.m2Info = {};    $scope.m3Info = {};    $scope.m4Info = {};    $scope.m5Info = {};    $scope.m6Info = {};$scope.create2ndMap = function(){    $scope.m2Info.push=({        name:holdBuilding[c].name,        link:holdBuilding[c].link    });    alert($scope.m2Info[3].name);    c++;}$scope.create3rdMap = function(){    $scope.m3Info.push=({        name:holdBuilding[c].name,        link:holdBuilding[c].link    });    c++;}$scope.create4thMap = function(){    $scope.m4Info.push=({        name:holdBuilding[c].name,        link:holdBuilding[c].link    });    c++;}$scope.create5thMap = function(){    $scope.m5Info.push=({        name:holdBuilding[c].name,        link:holdBuilding[c].link    });    c++;}$scope.create6thMap = function(){    $scope.m6Info.push=({        name:holdBuilding[c].name,        link:holdBuilding[c].link    });    c++;}angular.forEach(holdBuilding,function(){    if($scope.m1Special.Buildings[c].loc=="Northern"){        $scope.create2ndMap();    }    else if($scope.m1Special.Buildings[c].loc=="Central"){        $scope.create3rdMap();    }    else if($scope.m1Special.Buildings[c].loc=="Western"){        $scope.create4thMap();    }    else if($scope.m1Special.Buildings[c].loc=="Eastern"){        $scope.create5thMap();    }    else if($scope.m1Special.Buildings[c].loc=="Southern"){        $scope.create6thMap();    };});

When I console.log($scope.m2Info); This is what I get:

Object { push: Object } site.js:654:4Object { push: Object } site.js:654:4Object { push: Object } site.js:654:4Object { push: Object } site.js:654:4
Edited by Spunky
Link to comment
Share on other sites

*facepalm* should have known about the push thing, I use that elsewhere in my code. I thought they need to be objects since there is the name: and link:. Suppose there's still more I got to learn about arrays. When I console.log($scope.m2Info) it outputs Array [ Object, Object, Object, Object ]. Could you help me understand how name and link and whatever other items I add are stored in this array? You've said I can use console.log to get the structure, is there another way I can set mine up that will give me a clearer picture? I would appreciate it, if I understood this better I will have an easier time with arrays I think.

 

At any rate, this works now. Thank you so much for working with me to get it working.

Link to comment
Share on other sites

I thought they need to be objects since there is the name: and link:.

The elements of the array are objects, but it's an array of objects. It's still an array, regardless of what you store in it. You could have an array of functions if you really wanted to. Here's an array of functions:
var funcs = [Math.log, Math.cos, Math.exp];var num = 50;for (var i = 0; i < funcs.length; i++) {  num = funcs[i](num);}console.log(num);
That's a pretty academic example, I don't see much of a use for an array of functions, but the point is that you can have an array of anything. You have an array of objects.

When I console.log($scope.m2Info) it outputs Array [ Object, Object, Object, Object ].

So it's an array with 4 objects. You should be able to click on those objects to see them, you'll see the name and link properties. You would access them like $scope.m2Info[2].name, etc.
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...