Link to home
Start Free TrialLog in
Avatar of Seven price
Seven priceFlag for United States of America

asked on

Angular2 remove duplicates

Want to remove duplicates from object only for the display within my ngFor table.  Do not want to do it on the back end, we will need this for further reasons.  just hide it or not display it if it is a duplicate object. any suggestions or code examples would be greatly appreciated.
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

can you give us some idea of the data and how it is used ? By duplicate object do you mean
var x = [{
   firstname: 'Micky',
   lastname: 'Mouse'
},{
   firstname: 'Donald',
   lastname: 'Duck'
},{
   firstname: 'Micky',
   lastname: 'Mouse'
}

Open in new window

Third item is a duplicate of the first but not a duplicate as far as the object is concerned as it has a different reference.

Not sure how you would create a duplicate reference from backend data without processing it on the client so assuming it is the above?
any code/screenshot/link?

what do you mean by "remove duplicates from object"?
Avatar of Seven price

ASKER

var x = [{
   firstname: 'Micky',
   lastname: 'Mouse',
middle: 'Goofy'
},{
   firstname: 'Donald',
   lastname: 'Duck'
middle: 'd'
},{
   firstname: 'Micky',
   lastname: 'Mouse',
middle: 'Mason'
}

Open in new window



return
[code]var x = [{
   firstname: 'Micky',
   lastname: 'Mouse',
middle: 'Goofy'
},{
   firstname: 'Donald',
   lastname: 'Duck'
middle: 'd'
},{
   firstname: ''",
   lastname: ''",
middle: 'james'
}

Open in new window

[/code]

using  
<table *ngFor="let dlist of dash">
        <tr class="tg-yw4lHead" width="100" style="border-right:none;">
            <td class="tg-yw4l nobord" width="100" style="border-left:  inset;border-right:  none;">{{dlist.Name    }}</td>  << want this part distinct.
            <!--<td class="tg-yw4l" style="border-right:  none;"></td>-->
        </tr>
        <tr>
            <td class="tg-series" width="100" style="border-right:none"></td>
            <td class="tg-series" width="100">{{dlist.KriesName}}</td>

        </tr></table>

Open in new window

So out of my sample data - which Mickey do you choose and why?
did not matter it was Mickey or not but Mikey name showed up more than once.  I only need it for this purpose one time. Now if there is a different middle name with Mickey then display the middle name because it is not repeated.
Ok but now this is getting complicated.

You are saying that if a value exists anywhere in any other object you don't want to show that value but instead show some other value from the object - does not make sense.

There needs to be a rule. As I am reading it - it is much too vague.
@Julian Hansen - Yes But not looking to far into it. If I just have the one object value that repeats can we just hide the Object value that appear more than once.  Maybe in the view.  {{ value.name }}
example if value.name in a *ngFor loop appear once then show then hide if it shows again until another object single value appears that is different than the last then show and if that repeats more than once then hide.
You have two options
1. Filter the array in the controller - create a dataset that only has the values you want and use that in the ngFor
2. Create a Pipe (filter) on the ngFor and filter out the duplicates that way.

According to the docs though, option 2 is not recommended (see the Appendix) - you should create a filtering service and inject the filtered array into the component.
for (var i = 0; i < response.length; i++) {
    if (distinctValues.hasOwnProperty(response[i].Name)) {
        //already has it
        response.splice(i, 1);
        i--;
    } else {
        distinctValues[response[i].Name] = false;
    }
}

Open in new window


Yes I read the pipe is not recommended before posting. I can do it in the javascript object. But this one I wrote removes duplicates but does not return the addtional values. I think i am almost there.
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial