adding an array property to object in angular js

Question

I have an object called user:

It has properties like user.name, user.age e.tc.

Now, I need to add an array to user object called subjects via ng-model.

This is what i did inside of ng-repeat:

    <input type="text" ng-model="user.subjectname[$index]" 
  name="subject" ng-required="true" placeholder="Enter a subject name">

and when I do console.log(user.subjectname), it looks like this:

enter image description here

Now, after this, I wanted to do something like this:

<div ng-repeat="data in user.sujects">
                  <td>{{data}} </td>
                   </div>

But it does not work.

Try2:

In my my service that is called from controller, I tried this,

        if(dataArray== null)
                var dataArray=[];

            console.log("scop.user.subjectname...................." + user.subjectname);
            for(var i in user.subjectname)
            {   dataArray.push(user.subjectname[i]) 
            }
            user.data=dataArray;

so, now if I do,

 <div ng-repeat="data in user.data">
                      <td>{{data}} </td>
                       </div>

I still get nothing.

Can I get some direction to deal with this?

if it has to be array you probably need to add the property as empty array when data is received. Seems that ng-model is defaulting to object — charlietfl
– charlietfl, Commented Jul 11, 2015 at 14:51
If you needed to add an array called subjects to your user, why is the array called subjectname? It seems subjectname should be a child object of subjects, no? Also, what @charlietfl said. — Jan
– Jan, Commented Jul 11, 2015 at 14:52
possible duplicate of the following (same author, same issue, somewhat the same question): stackoverflow.com/questions/31357342/… — user1364910
– user1364910, Commented Jul 11, 2015 at 15:00

Community · Accepted Answer · 2017-05-23 12:29:46Z

2

Like I told you in your previous question, and showcased in a jsbin.

You need to use the (key, val) in object syntax to get those values out of user.subjectname

ng-repeat="(key, val) in user.subjectname" ng-bind="val"

If you need to transform this object into an array:

$scope.arr = [];

Object.keys(user.subjectname).forEach(function (key) {
  arr.push(user.subjectname[key]);
});

Then if you need to output that

ng-repeat="a in arr" ng-bind="a"

edit: after further explanation from you, I'm assuming this jsBin highlights something close to what you are after.

edited May 23, 2017 at 12:29

CommunityBot

11 silver badge

answered Jul 11, 2015 at 15:04

user1364910

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

9 Comments

charlietfl Over a year ago

or conversely ng-model does work with arrays so if OP wants array could add empty array property before view renders

user1364910 Over a year ago

Absolutely! Though I will admit, I have no clue whatsoever what the end goal is here, apart from printing out some data on the page. I'm assuming the OP can figure out the correct way to go about it with the answers he's received so far - be it an object or an array, ng-model or repeat.

user1364910 Over a year ago

@simikaur - If you are creating the array in a service, treat it as any JS object and return it into your controller. I've edited the jsBin to show you how that works.

user1364910 Over a year ago

I've edited my answer with a new jsBin. It's not pretty but I do believe it does what you just explained.

user1364910 Over a year ago

That's what I'm doing in the jsBin at the very bottom - looping through the keys of the object and outputting the values.

|

Collectives™ on Stack Overflow

adding an array property to object in angular js

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest