mongodbangulartypescriptpipes-filters

Angular 2 Pipes problems displaying data


I am trying to display data from a Mongodb collection and filtering it, depending on a value.

The problem is that even after filtering the data using a pipe, all data is shown if only one entry meets the condition. I only want the users which meet the conditions shown. It may be a logic error, but I have tried everything and can't come up with a solution to this.

The mongoDB structure is like this (example):

{
"_id": {
    "$oid": "590b8bfb51123bed5e4b6dda"
},
"city": "Madrid",
"type": "admin",
"username": "admin",
"password": "admin",
"email": "admin",
"phone": 123,
"knowledgeLevel": [
    {
        "category": "media",
        "_id": {
            "$oid": "590b8bfb51123bed5e4b6ddf"
        },
        "subcategories": {
            "javascript": 20,
            "html": 16,
            "css": 13,
            "java": 10,
            "net": 7,
            "php": 0,
            "c": 11,
            "development": 10,
            "network": 4,
            "security": 0,
            "patterns": 2,
            "logic": 17,
            "arithmetic": 9,
            "testing": 1
        }
    },
    {
        "category": "code",
        "_id": {
            "$oid": "590b8bfb51123bed5e4b6dde"
        },
        "subcategories": {
            "javascript": 0,
            "html": 0,
            "css": 0,
            "java": 0,
            "net": 0,
            "php": 0,
            "c": 0,
            "development": 0,
            "network": 0,
            "security": 0,
            "patterns": 0,
            "logic": 0,
            "arithmetic": 0,
            "testing": 0
        }
    },
    {
        "category": "use",
        "_id": {
            "$oid": "590b8bfb51123bed5e4b6ddd"
        },
        "subcategories": {
            "javascript": 0,
            "html": 0,
            "css": 0,
            "java": 0,
            "net": 0,
            "php": 0,
            "c": 0,
            "development": 0,
            "network": 0,
            "security": 0,
            "patterns": 0,
            "logic": 0,
            "arithmetic": 0,
            "testing": 0
        }
    },
    {
        "category": "think",
        "_id": {
            "$oid": "590b8bfb51123bed5e4b6ddc"
        },
        "subcategories": {
            "javascript": 0,
            "html": 0,
            "css": 0,
            "java": 0,
            "net": 0,
            "php": 0,
            "c": 0,
            "development": 0,
            "network": 0,
            "security": 0,
            "patterns": 0,
            "logic": 0,
            "arithmetic": 0,
            "testing": 0
        }
    },
    {
        "category": "create",
        "_id": {
            "$oid": "590b8bfb51123bed5e4b6ddb"
        },
        "subcategories": {
            "javascript": 0,
            "html": 0,
            "css": 0,
            "java": 0,
            "net": 0,
            "php": 0,
            "c": 0,
            "development": 0,
            "network": 0,
            "security": 0,
            "patterns": 0,
            "logic": 0,
            "arithmetic": 0,
            "testing": 0
        }
    }
],
"__v": 0

}

My pipe is as follows (I think the issue is in the filter function, what it does is that it runs through the user object and looks for the user.knowledgeLevel.media.java value and compares it to the javalevel value inside the HTML, and if it's equal or greater than that value, return it):

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'javafilter'
})

export class JavaFilter implements PipeTransform {

     transform(users: any, javalevel: any): any{
         if(javalevel === undefined) return users;

         return users.filter(function(user){
            for(let user of users){
                for(let kn of user.knowledgeLevel){
                    if(kn.category==='media'){
                        if(kn.subcategories.java>=javalevel){
                            console.log(user);
                            return user;
                        }
                    }
                }
            }
        })
    }
}

My table (I'll only post the table row) which is generated is this one:

<tr *ngFor="let user of users | javafilter:javalevel" >
    <td id="center" class="col-md-4">{{user.email}}</td>
    <td id="center" class="col-md-3">{{user.phone}}</td>
 </tr>

The javalevel value is on the same HTML as the table above, like this:

 <div id="java">
         <div class="col-md-10"><h5>Java</h5></div>
         <div class="col-md-2"><h5>{{javalevel}}</h5></div>
         <input type="range" min="0" max="20" [(ngModel)]="javalevel" step="1" />
   </div>

Thank you in advance!


Solution

  • since you are using Array.filter, remove the first for-loop for they're the same. Also, when using Array.filter, you should return true/false, refer documentation.

    return users.filter(function(user){
      for(let kn of user.knowledgeLevel){
        if(kn.category==='media'){
          if(kn.subcategories.java>=javalevel){
            console.log(user);
            return true;
          }
        }
      }
    })