What is the best way to identify duplicate data being returned from a server within a for loop?

When receiving sorted data from the server through an infinite scroll, my goal is to filter out duplicate entries and add new unique data to a client-side array. If duplicates are found, I want to stop the infinite scrolling process.

$scope.collections = [];

$scope.isBusy = false;

$scope.queryObject = {
    size: 12,
    sorter: 'timestamp',
    sort: {
      timestamp: -1
    },
    skip: 0
  }

$scope.loadMore = function() {
    if ($scope.isBusy == true) {
      return;
    }

    $scope.isBusy = true;

    Collect.all($scope.queryObject).then(function(res) {


      for (var i = 0; i < res.data.length; i++) {
        if ($scope.collections.length && res.data) {
          for (var j = res.data.length - 1; j >= 0; j--) {
            if ($scope.collections[0]._id == res.data[j]._id) {
              console.log('match', res.data[j])
              return;
            }
          }
          $scope.collections.push(res.data[i])
        }
        else{
        $scope.collections.push(res.data[i])
        }
      }

      $scope.queryObject.skip += 12;
      $scope.isBusy = false;
    });
  };

My approach involves checking the elements in reverse order of res.data against the first element in the collections array. However, I continue to encounter "res.data._id is not defined" error. Strangely, when removing this part and comparing collections[0] with res.data[j], it detects a match immediately. The console.log also displays res.data[j] with a defined ._id.

I suspect there might be a simple oversight causing this issue.

Answer №1

Here is another approach you could take.

var newArray = [];
for (var x = 0; x < response.data.length; x++) {
    if(newArray.indexOf(response.data[x]._id === -1) {
       $scope.items.push(response.data[x]);
       newArray.push(response.data[x]._id);
    } 
    else {
       break;
    }
}

Answer №2

for (var x = 0; x < res.data.length; x++) {
        if ($scope.items.length && res.data) {
          for (var y = res.data.length - 1; y >= 0; y--) {  
            if ($scope.items[0]._id == res.data[y]._id) {
              console.log('item found', res.data[y])
              return;
            }
          }
          $scope.items.push(res.data[x])
        }
        else{
        $scope.items.push(res.data[x])
        }
      }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am selecting specific items from a list to display only 4 on my webpage

I am trying to display items from a list but I only want to show 4 out of the 5 available items. Additionally, whenever a new item is added, I want it to appear first on the list, with the older items following behind while excluding the fifth item. Despi ...

Discover the magic of Bootstrap 3.0 Popovers and Tooltips

I'm struggling with implementing the popover and tooltip features in Bootstrap. While I have successfully implemented drop downs and modals, the tooltips are not styled or positioned correctly as shown in the Bootstrap examples, and the popover featur ...

Customizing an array.map display in React Native

For my app, I am creating multiple drawers to showcase how it can be used. This is done by using the following code: Array(400).fill(info).map(info => {return <AlbumBox info = {info} />}) The information of an object is retrieved and passed into ...

What could be causing this highchart plot to fail to display in both IE and Chrome?

Check out the plot in this jsfiddle: http://jsfiddle.net/essennsee/y5HCm/ The plot looks good in Firefox, but only shows the legend in IE and Chrome. If I remove the following code snippet it works fine. Is there a different way to format the labels?: ...

Transform collapsible color upon materialize click

Is there a way to change the color of the collapsible header only when clicked? I'm struggling with adding the color inside the class element while calling the "connect" function. Can this be achieved? <div class="collapsible-header" onclick="conn ...

What is the method to retrieve the color of a linearGradient in an SVG at a particular

I am working on a unique progress bar that uses a linear gradient and a small ellipse to indicate the completion percentage. The AngularJS binding updates the completion percentage and a function is called. My challenge is to change the color of the ellip ...

Delay in loading Jquery accordion due to value binding

I've noticed that my jquery accordion takes a significant amount of time to collapse when the page initially loads. After some investigation, I realized that the issue lies in the fact that there are numerous multiselect listboxes within the accordio ...

Two draggable elements and two droppable containers all conveniently placed on a single webpage

My current project involves two sets of draggable elements and two sets of droppable elements. I'm trying to achieve a specific functionality where the first set of draggable elements can only be dropped inside the first set of droppables, while the ...

Filtering dates in Angular

Currently, I am using moment JS to calculate a time duration in milliseconds. In my application's view, I would like this duration to be displayed as "25:25" representing 25 hours and 25 minutes. I attempted to utilize the angular date filter with th ...

Using both the variable and the JSON format from the Google Maps API

I am trying to display the coordinates from the input fields on a map using Google Maps API. However, I am facing an issue with passing the values to the script. Below is the code snippet: <input type="text" id="latitude" class="form-control" /> ...

Error encountered in IONIC with SQLite: "Unable to access 'openDatabase' method"

Hello, I am a beginner with IONIC and I could use some assistance with using ngCordova. I have successfully created a database on my app.js file. However, whenever I try to access the database on my controller, I keep encountering this error message: "Type ...

Troubleshooting intersecting objects in THREE.js

Having trouble detecting intersections of extruded objects in THREE.js. The objects are created from a 2D geometry as shown below: var geoShape = new THREE.Shape(vertexes); var geometry = new THREE.ExtrudeGeometry(geoShape, { bevelEnabled: false, amount: ...

Issue with Angular ng-model not functioning as expected within ng-repeat block

Encountering an issue when trying to bind Json data into ng-model within ng-repeat. html : <div ng-controller="Ctrl"> <div> <table> <th> <td>add</td> <td>ed ...

Selenium2: Exploring ways to retrieve error specifics after executeScript() encounters a failure

While facing certain idiosyncrasies with browsers, I often have to execute JavaScript commands during testing. Every now and then, Selenium returns an error stating that there was a JavaScript error without providing any specifics. Is there a method to re ...

Preventing users from inputting the symbols "+" or "-" in a React JS input field

Essentially, the input field should only accept values between 1 and 999 Input Field : <input type="number" value={value} onChange={this.props.onViltMaxUserChange} min="0" max="999" /> onChange : onViltMaxUserChange = _.throttle(e = ...

potential issues with memory leakage and browser crashes in three.js

Currently working on an app that features a spherical panorama photo with a jpg size of around 4Mb. Throughout the development process, I find myself constantly refreshing the page to see changes and browsing through various three.js example pages for insp ...

Selection auto-closing feature

I am currently working on a button that generates a dropdown menu with various categories to choose from. I would like the dropdown to automatically close when I click outside of it, similar to how a lightbox or modal popup works on a webpage. Currently, I ...

Can you use ng-show within ng-if in Angular?

How can I make this input only show a property is true per the ng-if? The current code looks like this: <input type="button" class="naviaBtn naviaBlue" ng-if="ppt.Globals.hasDebitCard" ng-click="alertShow = (alertShow == 2 ? -1 : 2)" value="outstandin ...

Creating valuable properties in TypeScript is a skill that requires knowledge and practice

In TypeScript, there is a unique feature available for defining properties with values using the `value` keyword. class Test { constructor(private value: number = 123) { } public MyValueProperty: number = 5; } Here is how you can define such ...

Error message for Joi when validating a nested array of objects

I have received user input from the client side and am performing backend validation using Joi. const Joi = require("joi") const schema = Joi.array().items( Joi.object().required().keys({ name: 'filter_list', value: Joi.array(). ...