Looping through data in AngularJS with duplicated entries

I'm having an issue with my AngularJS ng-repeat when trying to display JSON data. The records are duplicating, but only after reloading the page. Initially, everything works fine.

Take a look at the JSON data below:

    [{
    "EmployeeName": "Jishnu",
    "CategoryId": 0,
    "Points": 76,
    "DateAdded": "/Date(-62135596800000)/",
    "DateModified": "/Date(-62135596800000)/",
    "Id": 0
}, {
    "EmployeeName": "Sini",
    "CategoryId": 0,
    "Points": 56,
    "DateAdded": "/Date(-62135596800000)/",
    "DateModified": "/Date(-62135596800000)/",
    "Id": 0
}, ... and so on

Here is the snippet of AngularJS code:

 angular.module('myApp', [])
 .controller('ReportCtrl', ['$scope', '$http', '$window', function($scope, $http, $window) {

     $scope.employeePoints = [];
     $scope.searchText = [];

     // Handle $http request here

 }]);

And here's how it looks in HTML:

 <tr ng-repeat="point in employeePoints">
    <td>
        <span class="name">{{point.EmployeeName}}</span>
    </td>
    <td class="hidden-phone">
        {{point.Points}}
    </td>
</tr>

Upon inspecting the console log, here's the response data from the web service:

[{"EmployeeName":"Jishnu","CategoryId":0,"Points":76,"DateAdded":"/Date(-62135596800000)/","DateModified":"/Date(-62135596800000)/","Id":280},{"EmployeeName":"Sini","CategoryId":0,"Points":56,"DateAdded":"/Date(-62135596800000)/","DateModified":"/Date(-62135596800000)/","Id":78}, ...]

Answer №1

Uncertain about the specifics of your situation, but the code below should help you out

If you can modify index to id in your json object, you can utilize the track by syntax for the same purpose.

<tr ng-repeat="point in employeePoints track by point.id">
    <td>
        <span class="name">{{point.EmployeeName}}</span>
    </td>
    <td class="hidden-phone">
        {{point.Points}}
    </td>
</tr>

You could also use

ng-repeat="point in employeePoints track by $index"

Instead of using generic indices like $index, it's advisable to stick with your actual data ids. Use angularjs $index only if fetching ids is not feasible.

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

Using babel with node.js version 18 allows you to easily import modules with various extensions and run them from the build folder configured with commonJS. Ensure that you have specified "type:module"

I'm currently utilizing Node.JS version 18.20.4 alongside Babel. Below is my babel.config.json: { "presets": [ [ "@babel/preset-env", { "targets": { "node": 18 }, ...

What is the best way to eliminate specific duplicate characters from a string using JavaScript?

I have a project involving managing email responses, where the reply function includes pre-written content like Re: ${Subject of the email} The issue I'm facing is that after the 2nd reply, there is a repeated Re: , so I created a function to remove ...

Tips on resolving the Warning message: "The event handler property `onExited` is a known property in StatusSnackbar component, but it will

When using the StatusSnackbar component, I encountered a warning about a known event handler property onExited. How can I resolve this issue? Component: import Snackbar from '@material-ui/core/Snackbar' import { withStyles } from '@material ...

Attempting to transform a string into a JSON data structure

I need help with a string that is structured like this: { "payload" : { "name1 " : "value", "Dir" : "<users>/<userid>/<YYYY>/<MM>/<DD>", "file" : "username ...

How can I create a JSON response in ServiceStack that includes only the primary key?

After creating a new record in my table, I want to generate a JSON response that includes only the primary ID of the newly created record. For example: {"PrimaryID": 123} Currently, I am using the following custom function: // Adds a new row to the P ...

Difficulty organizing form inputs into arrays prior to submitting them through AJAX

I am currently developing a complex multi-step form that involves various sections such as Company, Job Site, Contact, and Product. My goal is to efficiently gather the form data either as an array or object before converting it into a string for transmiss ...

Issue with Basic jQuery Demonstration (Failure to Conceal Item)

Below is a jQuery example where an element should be hidden, but it's not working as expected: <html> <head> <script src="../lib/jquery-1.7.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $ ...

The submit function in Jquery is not functioning properly within the success callback of an Ajax request

After successfully submitting a form in AJAX using POST, I receive a new form that needs to be automatically submitted in jQuery. However, for some reason, the .submit() function seems to be ignored and I can't figure out why. I've tried adding ...

What is the best way to transform my Map containing custom data types into a JSON format?

Initially, I have a Class called Event where I only store one string variable. Within this class, I also have a Map variable that stores DateTime as keys and a List of Events as values. However, when attempting to convert this map to JSON, an error occurs. ...

Loading a different webpage seamlessly without having to reload the current one

Here is a snippet of my code in okay.html: {% extends "sch/base.html" %} {% load staticfiles %} {% block content %} <div class="row" id="ada"> <form action="" method="post> {% csrf_token %} <div align="center" class="cont ...

Postgres issue: "Encountering error when attempting to use json_populate_recordset on an object"

My issue involves a table containing unpacked jsons in one column ("actionDetails"), with the potential for multiple json objects within a single row. Surprisingly, when I execute the following query: SELECT "idVisit" AS visit_id, t.* FROM dl.live ...

Leveraging colons in the process of object destructuring

I'm still trying to wrap my head around all the wonders of ES6. Ran across this snippet in an online article and I'm puzzled by how PrivateRoute is deconstructing the input props. What exactly is the purpose of component: Component here? const P ...

Trying to access AngularJS .scope() from within a <script> tag returns an undefined result

Just starting out with Angularjs, MVC 4, and VS 2012. I've created an angular function called AddRealTimeAlert that adds a nicely formatted alert (not a generic js alert box) to be displayed to the user. When I call this function using the button wit ...

The contents of Ionic views are not stored in a cache, so the controller must

In my ionic application, I have several views. When I launch the app, it takes me to the main view where data is loaded upon initialization of the controller. The issue arises when I navigate away from this view using tabs; sometimes the controller gets d ...

Retrieving a JSON object from a URL with PHP

After trying to retrieve responses from a URL in JSON format using PHP, I was able to successfully display the target_url. Here is the code that worked for me. <?php $content = file_get_contents("https://code.directadvert.ru/show.cgi?adp=53 ...

Optimize JSON Data in Postgresql

When employing an inner join to merge 3 tables - Owner, Store, and Machine, I am attempting to display the JSON output from these multiple tables in the following manner: SELECT ow.*, st.*, ma.* FROM owner ow INNER JOIN st.store ON ow.OwnerId = st.Ow ...

JavaScript code for validating two passwords is malfunctioning

I'm currently working on a registration form for my website and I'm trying to implement a JS script that compares two password inputs (password and repeat password) and displays a message saying "passwords are not the same." Below is the code I h ...

Steps for setting up type-graphql in your projectNeed help with

Trying to include this in my TypeScript project: import { ID } from "type-graphql"; Encountered an issue when attempting to install type-graphql. Received a 404 error stating that it could not be found in the npm registry. npm install @types/type-graphq ...

Working on asynchronous processing of Highland stream fragments

My current setup involves utilizing highland.js to process a file using a stream and extract content between specific delimiters. Additionally, I am incorporating async.js to perform a sequence of http requests. I am seeking a way to pass the output x fro ...

Tips for transmitting a batch of resources with Restangular?

Suppose I need to make a DELETE request to delete multiple products from the resource /products. The complete request should be sent to this URI: /products/ids=1&ids=2&ids=3 What is the method to send a request like this using Restangular? The c ...