angular.js:13920 Alert: [ngRepeat:dupes] Multiple occurrences in a repeater

I encountered an issue while attempting to parse a JSON file and map it in HTML.

Here is the JavaScript code snippet:

searhController.orderlogs.results = JSON.stringify(response.data);

This is how it's implemented in Angular:

<tr ng-hide="searhController.searching" ng-repeat="log in searhController.orderlogs.results">
                    <td>{{log.idTransaction}}</td>
                   <!-- <td>{{log.amount}}</td>
                    <td>{{log.clientName}}</td>
                    <td>{{log.created}}</td>
                    <td>{{log.currency}}</td>
                    <td>{{log.discountedAmount}}</td>
                    <td>{{log.lastUpdate}}</td>
                    <td>{{log.orderId}}</td> -->
                </tr>

The JSON data being used:

 [{"idTransaction":2081101,"amount":34990.0,"clientName":"Payment hub","created":"ene 12, 2015","currency":"CLP","discountedAmount":34990.0,"lastUpdate":"ene 12, 2015","orderId":"1421094905114","productDescription":"total: 1 item(s)","fop":{"nameFop":"CAT_FAKE"},"application": {"idApplication":10001,"nameApplication":"TEST APPLICATION"}, "transactionStatus":{"nameTransactionStatus":"Waiting for reply"}, "transactionByFop":{"settled_amount":0.0,"installments_amount":0.0,"installments_number":0}}]

The error message received:

angular.js:13920 Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: log in searhController.orderlogs.results, Duplicate key: string:a, Duplicate value: a

Answer №1

Your JSON code needs to be properly formatted because it's not small enough to be a one-liner. It should look like this:

{  
   "transaction":{  
      "idTransaction":2081101,
      "amount":34990.0,
      "clientName":"Payment hub",
      "created":"ene 12, 2015",
      "currency":"CLP",
      "discountedAmount":34990.0,
      "lastUpdate":"ene 12, 2015",
      "orderId":"1421094905114",
      "productDescription":"total: 1 item(s)",
      "fop":{  
         "nameFop":"CAT_FAKE"
      },
      "application":"",
      "idApplication":10001,
      "nameApplication":"TEST APPLICATION"
   },
   "transactionStatus":{  
      "nameTransactionStatus":"Waiting for reply"
   },
   "transactionByFop":"",
   "settled_amount":0.0,
   "installments_amount":0.0,
   "installments_number":0
}

I corrected your mistakes by filling in empty attributes and ensuring there is only one root element. Make sure to test if the corrected JSON works properly.

Answer №2

<tr ng-hide="searhController.searching" ng-repeat="log in searhController.orderlogs.results track by $index">
                <td>{{log.idTransaction}}</td>
               <!-- <td>{{log.amount}}</td>
                <td>{{log.clientName}}</td>
                <td>{{log.created}}</td>
                <td>{{log.currency}}</td>
                <td>{{log.discountedAmount}}</td>
                <td>{{log.lastUpdate}}</td>
                <td>{{log.orderId}}</td> -->
            </tr>

Remember to include track by $index at the end of your ng-repeat statement. This will ensure that each object is uniquely identified based on its position rather than its value, preventing duplicate objects from being incorrectly tracked.

Answer №3

Try this out,

ng-repeat="item in searchControl.orderHistory.results track by $index">

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

What is the process for setting the version in a serverless project?

Recently I downgraded the serverless to version 1.38.0 using the command npm install -g <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="047761767261766861777744352a373c2a34">[email protected]</a>. This triggered in ...

Extract JSON data using jq and display the results for each subfield iteratively

My JSON data is structured as follows: { "field1":"foo", "array":[ { child_field1:"c1_1", child_field2:"c1_2" }, { child_field1:"c2_1", ...

Delay the next loop iteration until receiving an HTTP request

I have a task where I am collecting YouTube video IDs and storing them in an array. Then, I am looping through each video ID to determine the size of that ID's thumbnail image. My challenge now is making sure my loop waits for the HTTP request to fini ...

What could be causing my images not to show up when I use string interpolation for src links in Vue.js?

I've encountered an issue while working on Vue.js where I'm struggling to render a couple of images from the local directory. What puzzles me is that this problem arises when using string interpolation, like in the code snippet below: <img :s ...

Sharing an image from an Ionic app to an Express.js server using Multer

I've attempted various methods to achieve this, but with no success. Here is my code for uploading an image using the Ionic framework (simply copy and paste it to run on Android). angular.module('starter.controllers', ['ngCordova' ...

What is the best way to retrieve information from an Array within a JSON Object?

I currently have a Json object called FriendJson, which contains an array field named friends. This is the Json Object: [ { "id": 4, "updated": "2023-01-07T22:06:23.929206Z", "created": "2023-01-0 ...

Alert: Zone.js has identified that the ZoneAwarePromise '(window|global).Promise' has been replaced with polyfills. Kindly address this issue

Recently, I updated my Angular application from version 8 to 9. After updating the packages and successfully compiling the application, I encountered an error message in the Chrome browser console: Error: Zone.js has detected that ZoneAwarePromise `(wind ...

Deciphering JSON with the help of a variable in PHP

My goal is to display the price of each item using the market hash name. I can successfully return the JSON when the master is set to a single item (e.g. MP7 | Olive Plaid (Field-Tested)), but when I use a variable (checkgrd->market_hash_name, which was ...

Shifting Vue components within the dom structure?

Whenever I am on a mobile device, I move Vue components higher up in the dom so that I can use absolute positioning without being contained within a relative container. if (this.mobile) { this.$el.parentNode.removeChild(this.$el); document.getElem ...

When I implement the persist gate in Next.js with Redux, the flex direction automatically adjusts

I'm currently developing an app using next js and redux. An interesting issue has arisen - when I include PersistGate in my _app.js file, the flex direction mysteriously changes from row to column in index.js. There haven't been any modifications ...

The issue of JQuery mobile customizing horizontal radio buttons failing to function on physical devices has been identified

Not long ago, I posed a query on Stackoverflow regarding the customization of horizontal jQuery-mobile radio buttons. You can find the original post by following this link How to customize horizontal jQuery-mobile radio buttons. A developer promptly respon ...

What is the best way to send a variable to an event listener?

Forgive me if my issue seems insignificant to those well-versed in JS. I've developed an image carousel and am working on linking a thumbnail to a full-size image, so that when a user clicks on the thumbnail, the larger image appears in another sectio ...

What prevents me from extending an Express Request Type?

My current code looks like this: import { Request, Response, NextFunction } from 'express'; interface IUserRequest extends Request { user: User; } async use(req: IUserRequest, res: Response, next: NextFunction) { const apiKey: string = ...

Error: Cannot locate 'import-resolver-typescript/lib' in jsconfig.json file

Issue: An error occurred stating that the file '/Users/nish7/Documents/Code/WebDev/HOS/frontend/node_modules/eslint-import-resolver-typescript/lib' could not be found. This error is present in the program because of the specified root file for c ...

Cannot access a Typescript method variable within an inline function

I've encountered an issue with my code involving loading values into the array usageCategory within an inline function. Despite successfully adding values to the array inside the function, I am unable to print them outside it. getAllUsageCategoryElem ...

Positioning Avatar component at the center of Card component

Hello there, I am currently trying to center my <Avatar> elements using Material UI with React within the <Card> components. The layout appears very crowded right now. What would be the most effective method to achieve this? I attempted setti ...

Necessary workaround needed for HTML time limit

Our HTML page has been designed to automatically timeout after 10 minutes of inactivity. This functionality is achieved through the following code: function CheckExpire() { $.ajax({ type:'GET', url:self.location.pathname+"?ch ...

Encountering an AngularJS 1.6 unit testing issue where the $scope is not defined, leading to a TypeError when trying to read the property 'setDescription' from undefined

While testing my angularjs 1.6.8 application with karma-jasmine, I keep encountering errors such as $scope is not defined and TypeError: Cannot read property 'setDescription' of undefined I have attempted to resolve these issues by searching onl ...

Create a visual representation of an item within a framework using an Angular directive

I am interested in using a directive to draw a triangle above a series of div elements. In my scenario, I have four squares and two values: charge and normal. The value of charge determines the color of the squares, while normal is used for drawing the t ...

Replacements of JSON null values within Mantle

Utilizing Mantle for parsing JSON data, the typical structure includes: "fields": { "foobar": 41 } However, there are instances where the value of foobar is null: "fields": { "foobar": null } This leads to an exception being thrown ...