How can I create an object on the fly with AngularJS using variables?

Question

create objects on the fly with angularjs

Ok so yes, I can create objects on the fly. But I am having a hard time implementing this into my own code. Here is what I have:

var holdBuilding = $scope.m1Special.Buildings;
var c = 0;
$scope.m2Info = {};

angular.forEach(holdBuilding,function(){
    if($scope.m1Special.Buildings[c].loc=="Northern"){
        alert(holdBuilding[c].name);
        $scope.m2Info=[{
            name:holdBuilding[c].name;
            link:holdBuilding[c].link;
        }];
        c++;
    };
});

My code seems to resemble the 1st link more than the 2nd, but the 2nd is using Angular. I think he is doing something different than me though. Or maybe I am just approaching this wrong.

When I run the code, well, the Angular breaks completely. If I comment out this section, however:

    $scope.m2Info=[{
        name:holdBuilding[c].name;
        link:holdBuilding[c].link;
    }];

Then the code runs and I am able to see that the alert does correctly alert the names. It just doesn't like the object building part. What am I doing wrong?

The error that I am getting when the Angular breaks is:

SyntaxError: missing } after property list

for line:

name:holdBuilding[c].name;

When Angular breaks completely, it shows all the interpolations on the page. Anything from the Angular controller does not show. — Christine268
– Christine268, Commented Jun 11, 2015 at 20:10
"SyntaxError: missing } after property list" for line 648 which is: name:holdBuilding[c].name;. Sorry I forget to check that sometimes, still don't make sense to me. — Christine268
– Christine268, Commented Jun 11, 2015 at 20:19
Are you trying to make a copy of all the objects in $scope.m1Special.Buildings that have the loc Northern? — allienx
– allienx, Commented Jun 11, 2015 at 20:38

a better oliver · Accepted Answer · 2015-06-11 20:53:20Z

1

Alt. 1:

$scope.m2Info.name = holdBuilding[c].name;
$scope.m2Info.link = holdBuilding[c].link;

You already have an object, you only need to set the properties.

Alt. 2:

$scope.m2Info = {
                  name: holdBuilding[c].name,
                  link: holdBuilding[c].link
                };

To define a new object including properties you follow the syntax name: value,. No comma is needed for the last property.

answered Jun 11, 2015 at 20:53

a better oliver

26.9k2 gold badges64 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Christine268 Over a year ago

Marking yours as answer, turns out I just needed to replace the semi-colons at the ends with comas, ugh, hate it when I make simple stupid syntax errors. Glad to know I was otherwise doing it right!

csbarnes · Accepted Answer · 2015-06-11 20:10:43Z

0

You should use angular.copy if you are replacing an entire array or object. This will update the reference to the original object.

Additionally you don't need to manually track an iterator. angular.forEach function contains the object as the first parameter.

var buildings = $scope.m1Special.Buildings;
$scope.m2Info = [];

angular.forEach(buildings, function(building) {
    if (building.loc=="Northern") {
        alert(building.name);
        angular.copy([{
            name:building.name;
            link:building.link;
        }], $scope.m2Info);
    };
});

It should be noted that $scope.m2Info will always only contain the last object in the buildings array. You may want to use $scope.m2Info.push(building); instead.

Edit: you can also get the key via the second parameter in the forEach function angular.forEach(buildings, function(building, key) {...}

answered Jun 11, 2015 at 20:10

csbarnes

1,8922 gold badges28 silver badges35 bronze badges

3 Comments

Christine268 Over a year ago

I guess copying it is ok, there will never be a time that either object changes on the fly. However, how is having $scope.m2Info only containing the last object in the buildings array? The point of doing angular.forEach is to capture all the objects in the buildings array. Essentially yes I am trying to make a duplicate of it without copying and pasting it since I am using it elsewhere as well...but cannot use the original..

csbarnes Over a year ago

then you want to use $scope.m2Info.push({name: building.name, link: building.link}); instead of angular.copy. Before you were explicitly overwriting the previous $scope.m2Info by using $scope.m2Info= ... (unless that line was supposed to be $scope.m2Info[c]= ...).

Christine268 Over a year ago

Ohh ok I get it now. Yea, with the current code, it would alert each name located in the original object if I did alert($scope.m2Info[0].name); so it was overriding it as you said. Changed it to $scope.m2Info[c]=...` Thanks!

Collectives™ on Stack Overflow

How can I create an object on the fly with AngularJS using variables?

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related