*ngFor does not display array data nor any error

Question

Working with mongoDB's $filter aggregation currently, and it has been able to produce me the expected output from my query. The problem lies within my HTML whereas *ngFor does not display my data nor does it show any error within the console.

For a better understanding, this is my JSON produced from a console.log:

Below is my query code:

//api.js

router.get('/agent-policies/:name', (req, res) => {

    db.collection('users').aggregate([
        // Get just the docs that contain an agent element where agent is === req.params.name
        {$match: {'paPolicies.policy.agent': req.params.name}},
        {$project: {
            policy: {$filter: {
                input: '$paPolicies.policy',
                as: 'police',
                cond: {$eq: ['$$police.agent', req.params.name]}
            }},
            _id: 0
        }}
    ]).toArray((err, results) => {
        if (err) throw err;
        res.send(results);
    })

})

And lastly, my template code:

//component.html

<div *ngFor='let police of agentPolicies'>
      {{police.relationship}}
</div>

where agentPolicies has been set as an array in my component.ts as:

agentPolicies: any = [];

Since the code is not producing any error, I would assume that the problem is within my HTML and I am not using *ngFor correctly. What do I change in order to display the value of relationship from my JSON?

micronyks · Accepted Answer · 2020-07-29 16:17:55Z

1

Since relationship is a property of policy array and first object of it. You must change your HTML as below,

<div *ngFor='let police of agentPolicies?.policy'>  
      {{police.relationship}}
</div>

OR

 <div *ngFor='let police of agentPolicies'>  
  
      <div *ngFor='let pcy of police?.policy '>  

          {{pcy.relationship}}

       </div>

 </div>

answered Jul 29, 2020 at 16:17

micronyks

55.6k17 gold badges122 silver badges166 bronze badges

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

1 Comment

Brio Tech Over a year ago

Hey @micronyks. Thanks for the answer. Your second edit solved the problem for me. I'll be accepting this.

Aaron Adrian · Accepted Answer · 2020-07-29 16:25:23Z

1

This is what your API is returning:

const agentPolicies = [
  {
    policy: [
      {
        relationship: '...',
        // ...
      }
    ]
  }
];

Notice that each object has a property policy, which itself is an array of objects.

Option 1: Loop through policy

With that being the case, you need to iterate through each policy array in your HTML:

<div *ngFor='let police of agentPolicies'>
  <div *ngFor='let policy of police.policy'>
      {{policy.relationship}}
  </div>
</div>

Option 2: Modify your query in your API

If there should only be one policy per object so that your data looks like this:

const agentPolicies = [
  {
    policy: {
      relationship: '...',
      // ...
    }
  }
];

then you need to update your query in api.js to return a single policy from your array coming from $project. Take a look at $replaceRoot to find how you can replace the policy array with a single object from that same array.

answered Jul 29, 2020 at 16:25

Aaron Adrian

5293 silver badges13 bronze badges

2 Comments

Brio Tech Over a year ago

Although I've already accepted an answer, I still appreciate a thorough explanation! Thanks for this. It is my first time using $filter aggregation that's why I was unsure.

Brio Tech Over a year ago

Moreover, I've designed it in such a way that there will be multiple policies per object so this is fine just the way it is.

Collectives™ on Stack Overflow

*ngFor does not display array data nor any error

2 Answers 2

1 Comment

Option 1: Loop through policy

Option 2: Modify your query in your API

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Option 1: Loop through policy

Option 2: Modify your query in your API

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related