Removing duplicate array items in angularjs

Question

I have a websocket connection that pulls json data in angularjs. The basic idea is code:5 items in the array are questions and code:6 items in the array are requests to delete the question.

the first jSON data received would look like this:

[{"code":1,"timestamp":"2017-07-11T21:00:16.655706556Z","text":"Welcome to the listening pool, total clients 1","uuid":"51c7d6c7-8b6a-4b39-a460-343480e6cd23"},{"code":5,"timestamp":"2017-07-11T21:00:18.736695286Z","text":"By trying we can easily learn to endure adversity.  Another man's, I mean.\n\t\t-- Mark Twain\n","uuid":"9046a275-ada8-415a-9dd3-37bdbfc43f75"}]

the code:5 item would then be posted to the page in a question queue. The second update from the websocket would include a code:6 to remove the already posted question (code:5). I am using the uuid value to find the matches and remove the question.

[{"code":1,"timestamp":"2017-07-11T21:00:16.655706556Z","text":"Welcome to the listening pool, total clients 1","uuid":"51c7d6c7-8b6a-4b39-a460-343480e6cd23"},{"code":5,"timestamp":"2017-07-11T21:00:18.736695286Z","text":"By trying we can easily learn to endure adversity.  Another man's, I mean.\n\t\t-- Mark Twain\n","uuid":"9046a275-ada8-415a-9dd3-37bdbfc43f75"},{"code":6,"timestamp":"2017-07-11T21:00:23.870193214Z","uuid":"9046a275-ada8-415a-9dd3-37bdbfc43f75"}]

The problem I'm running into is that it only removes the first duplicate . When more data is received from the web socket it puts the old data already removed items back in.

Any help would be greatly appreciated.

This is my angular code:

  <section ng-controller="WaitingRoom">
    <ul ng-repeat="data in MyData.collection | orderBy: '-timestamp' track by $index" ng-show="data.code == 5 && data.uuid != MyData.collection[$index].uuid">
      <li id="code"> Code: {{ data.code}} </li>
      <li> Timestamp: {{ data.timestamp | date:'medium'}} </li>
      <li> Question: {{ data.text}} </li>
      <li id="uuid"> ID: {{ data.uuid}} </li>
    </ul>
  </section>

angular.module('MY_APP', ['ngWebSocket'])
//                      
.factory('MyData', function($websocket) {
  // Open a WebSocket connection
  var dataStream = $websocket('ws://website.com/data');

  var collection = [];

  dataStream.onMessage(function(message) {
    collection.push(JSON.parse(message.data));
  });

  var methods = {
    collection: collection,
    get: function() {
      dataStream.send(JSON.stringify({ action: 'get' }));
    }
  };

  return methods;
})
.controller('WaitingRoom', function ($scope, MyData) {
  $scope.MyData = MyData;
});

Can you just add a check before the `collection.push(JSON.parse(message.data));` line to check the uuid to see if it's already in the collection? If not, then add it. Otherwise--disregard, replace, or remove that item. — Jon La Marr, Jul 11 '17 at 21:26

score 0 · Answer 1 · edited Apr 25 '18 at 04:42

0

You can use filter called unique in angularjs.

Example is given below:

ng-repeat="data in array | unique:fieldName"
{{data }}

edited Apr 25 '18 at 04:42

Diego Venâncio

5,698
2
49
68

answered Jul 12 '17 at 09:47

Rigin Oommen

3,060
2
20
29

I tried the unique filter but that still displays one off the duplicate items. I used the Ng-show filter which works for the fist time it gets data from the websocket but then puts it back on the second update – Navistar Jul 12 '17 at 22:19
Can you please share the data structure that follows – Rigin Oommen Jul 17 '17 at 09:53
there are two data structure examples in the original post above. Let me know if you need something else. – Navistar Jul 17 '17 at 11:41

score -1 · Answer 2 · answered Jul 13 '17 at 08:05

-1

If you don't mind using stuff like Underscore.js, it has a way to remove duplicates from an array.

Maybe this will interests you :https://stackoverflow.com/a/11478378/2660180

answered Jul 13 '17 at 08:05

Freego

456
7
18

score -1 · Accepted Answer · answered Jul 13 '17 at 20:52

I think I got it to work. Not sure if this is the best way to do it but it seems to be working. Any suggestions on cleanup or a better solution would be greatly appreciated.

dataStream.onMessage(function(message) {
       var data = collection.push(JSON.parse(message.data)); 
       var data = (JSON.stringify(collection));


       var data = Object(collection);

        for (var i = 0; i < data.length; i++) {
              var uuid1 = collection[i].uuid;
              // console.log(uuid1);

                for (var j = 0; j < data.length; j++) {

                  var uuid2 = collection[j].uuid;
                  // console.log(uuid2);

                    if (i !=j){

                        if (uuid1 == uuid2){
                          console.log("Duplicate found: " + uuid1);
                          collection.splice(i);
                          collection.splice(j);
                        }
                        else console.log("No Duplicates");
                      }
                }
        }


      });

Removing duplicate array items in angularjs

3 Answers3