删除angularjs中的重复数组项答案

【问题标题】：Removing duplicate array items in angularjs删除angularjs中的重复数组项
【发布时间】：2017-07-11 21:17:21
【问题描述】：

我有一个 websocket 连接，可以在 angularjs 中提取 json 数据。基本思想是代码：数组中的5项是问题，数组中的代码：6项是删除问题的请求。

收到的第一个 jSON 数据如下所示：

[{"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:5 项目随后将发布到问题队列中的页面。 websocket 的第二次更新将包括一个代码：6 以删除已发布的问题（代码：5）。我正在使用 uuid 值来查找匹配项并删除问题。

[{"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"}]

我遇到的问题是它只删除了第一个副本。当从 Web 套接字接收到更多数据时，它会将已删除的旧数据重新放入。

任何帮助将不胜感激。

这是我的角码：

  <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;
});

【问题讨论】：

您可以在collection.push(JSON.parse(message.data)); 行之前添加一个检查来检查uuid 是否已经在集合中？如果没有，那么添加它。否则 - 忽略、替换或删除该项目。

标签： angularjs arrays json websocket

【解决方案1】：

您可以在 angularjs 中使用名为 unique 的过滤器。

示例如下：

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

【讨论】：

我尝试了独特的过滤器，但仍然显示重复项目中的一个。我使用了 Ng-show 过滤器，它第一次使用它从 websocket 获取数据，然后将其放回第二次更新
能否分享一下下面的数据结构
上面的原帖中有两个数据结构示例。如果您还需要其他东西，请告诉我。

【解决方案2】：

如果您不介意使用 Underscore.js 之类的东西，它可以从数组中删除重复项。

也许这会让你感兴趣：https://stackoverflow.com/a/11478378/2660180

【讨论】：

【解决方案3】：

我想我得到了它的工作。不确定这是否是最好的方法，但它似乎正在工作。任何有关清理或更好解决方案的建议将不胜感激。

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");
                      }
                }
        }


      });

【讨论】：