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:

1. Get the length of the Personalities object (I've researched that Underscore library could do this
2. 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.

Answer 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>