AngularJS access dynamic object attribute

Question

I'm building a MEAN stack application. One of my schema properties is schemaless.

var UserSchema = new Schema({
    name: String,
    age: Number,
    personalities: {}
}, {strict: false});
var User = mongoose.model('User', UserSchema);

In my user schema, the personalities is schemaless, because I have a dynamic data that I need to input on that personalities.

This is my sample database:

As you can see, the 1st user has 3 personalities (horoscope, weight and height), the second one has (work, ideas and hobbies).

On the Angular side, my question is, how can I show the dynamic data from personality?

Here is the sample code

<h1>Name: {{user.name}}</h1>
<h1>Age: {{user.age}}</h1>
<h1>Personalities: {{user.personalities}}</h1>

Now on this code, on the personalities, it will show the JSON object of personalities. How can I show the personalities dynamically?

Because I can't do something like this

<h1>Horoscope: {{user.personalities.horoscope}}  </h1>
<h1> weight: {{user.personalities.weight}} </h1>
<h1>height:  {{user.personalities.height}} </h1>

This will only serve 1 user because my personality is schemaless. Is there a way in Javascript to dynamically access the attribute and the property of an object? So I could serve all users with a different personality. What I want to achieve is something like this:

Get the length of the Personalities object (I've researched that Underscore library could do this
Once I have the length, now I need to get the attribute in "attribute: value" in the object so I could put it on "h1" like this

<h5>{{user.personality.firstAttribute}}: {{user.personality.firstValue}}</h5>
<h5>{{user.personality.secondAttribute}}: {{user.personality.secondValue}}</h5>

and so on and so forth until it reaches the maximum length of the object.

Thank you!! never thought i would be able to use ng-repeat in an object! — John
– John, Commented May 20, 2017 at 12:35
yeah >_< will start doing that now. I now know that im missing so many features of angularjs by not reading the docs. Thanks again! — John
– John, Commented May 20, 2017 at 12:40

Frank Modica · Accepted Answer · 2017-05-20 12:17:57Z

1

You can use ng-repeat to iterate over the users. Then nest another ng-repeat to iterate the properties of a single user's personalities:

<div ng-repeat="user in users">
    <h1>Name: {{user.name}}</h1>
    <h1>Age: {{user.age}}</h1>
    <h1 ng-repeat="(key,val) in user.personalities">{{ key }}: {{ val }}</h1>
</div>

edited May 20, 2017 at 12:17

answered May 20, 2017 at 12:15

Frank Modica

10.5k4 gold badges27 silver badges42 bronze badges

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

3 Comments

Jax Over a year ago

shouldnt it be (key,val) in user.personalities ?

Jax Over a year ago

it was your own answer dude :-)

John Over a year ago

Thank you so much!!! it works! and here i was thinking i couldn't use ng-repeat in an object, i thought it's only for arrays. Another thing i learned! thanks again!

Collectives™ on Stack Overflow

AngularJS access dynamic object attribute

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related