删除angularjs中的重复数组项

Posted 2023-02-16

【中文标题】删除angularjs中的重复数组项

【英文标题】：Removing duplicate array items in 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 是否已经在集合中？如果没有，那么添加它。否则 - 忽略、替换或删除该项目。

【参考方案1】：

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

示例如下：

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

【讨论】：

我尝试了独特的过滤器，但仍然显示重复项目中的一个。我使用了 Ng-show 过滤器，它第一次使用它从 websocket 获取数据，然后将其放回第二次更新

能否分享一下下面的数据结构

上面的原帖中有两个数据结构示例。如果您还需要其他东西，请告诉我。

【参考方案2】：

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

也许这会让你感兴趣：https://***.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");
                      
                
        


      );