Error Encountered: Duplicate Key Found in Repeater while using an Array called 'name'. The issue is resolved when using a different name

Here's the issue: when the variable is named 'name', the error 'dupes Duplicate Key in Repeater' appears!

But why does this happen? Here's the code snippet:

app.js

var galleryModule = angular.module ("gallery",[]);
var name = ['Juan Manuel Jimenez','Carlos ALberto','Choko Barrios','Cota','Huevo'];

galleryModule.controller("appController", ["$scope", function($scope) {
        $scope.names = name;
}]);  

index.html

<!DOCTYPE html>
<html lang="en" ng-app="gallery">
<head>
    <title>
        GALERIA
    </title>
    <meta charset="utf-8">
    <script src="JS/angular.js"></script>
    <script src="JS/app.js"></script>
</head>
<body>
    <div class="container" ng-controller="appController">
     <div ng-repeat="n in names">
        Welcome: {{n}}
     </div>
    </div>
</body>
</html>  

However, if you change 'name' to 'something' in the second line of app.js and within appController as well. The code will function without any issues! That's strange to me.

Update:
I've resolved my problem. I realized that I was using the name variable in the global scope, causing conflicts with the windows.name

So, the solution I opted for was to use a closure like this:

(function() {
    var galleryModule = angular.module ("gallery",[]);
    var name = ['Juan Manuel Jimenez','Carlos ALberto','Choko Barrios','Cota','Huevo'];

    galleryModule.controller("appController", ["$scope", function($scope) {
            $scope.names = name;
    }]);
})();

Thank you all! :)

Answer №1

Greetings,

In my opinion, it would be beneficial to define the name array within the controller's scope. By doing so, you can eliminate the problem you are currently facing. Additionally, consider making some modifications to the $scope variable by only defining it as a parameter of the function and using minimal [] brackets if possible.

var galleryModule = angular.module ("gallery",[]);

galleryModule.controller("appController", function($scope) {
     var name = ['Maria Rodriguez','Pedro Martinez','Luisa Ramirez','Sofia Gomez','Raul Hernandez'];
        $scope.names = name;
});

Appreciate your time & Best regards

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 encountering an issue while attempting to set up admob for my react native application, as I am facing

Encountering an error The file "/BuildProductsPath/Release-iphoneos/XCFrameworkIntermediates/GoogleAppMeasurement/WithoutAdIdSupport/GoogleAppMeasurement.framework/GoogleAppMeasurement(APMAdExposureReporter.o)" does not have bitcode. Suggestions include r ...

Using JavaScript to modify a section of an anchor link attribute

I am looking to dynamically update part of the URL when a specific radio button is selected. There are three purchase links, each representing a different amount. After choosing an animal, I need to select one of the three amounts to spend. How can I modi ...

I'm wondering if there is a method for me to get only the count of input fields that have the class "Calctime" and are not empty when this function is executed

Currently, I am developing an airport application that aims to track the time it takes to travel between different airports. In this context, moving from one airport to another is referred to as a Sector, and the duration of time taken for this journey is ...

send the variable to the deferred done function

Having trouble passing a variable into a done callback. var getDataForCompany = function(company_id) { $.ajax({ type: "post", url: url, data:{ company_id: company_id } }).done(function(returnedData, textStatus, j ...

Enhance your user interface by customizing the expand icon in the React material

Currently, I am utilizing Material-table with a focus on Tree-data. You can find detailed information about this feature here: https://material-table.com/#/docs/features/tree-data. While attempting to implement the provided example, I am encountering diff ...

Resizing Elements with JQuery and Moving Them Forward

I have successfully made multiple objects draggable and resizable using the JQuery plugins for Draggable and Resizable. While dragging an object, it automatically comes to the front due to the stack option. However, when resizing an element without draggin ...

Uploading Files Using Ajax to a PHP Class

Having some trouble with my file upload using AJAX to post to an object-oriented PHP class. Here's the AJAX code: var handleUpload = function(event) { event.preventDefault(); event.stopPropagation(); var fileInput = document.getElement ...

Solving SEO issues with jQuery load()

I have developed a modal window that includes links, but unfortunately, search engine crawlers are unable to read and index those links. I am looking for a solution to make sure the crawler can index those links. I have noticed websites using AngularJS li ...

Encountering a Typescript error when trying to invoke a redux action

I have created a redux action to show an alert message export const showAlertConfirm = (msg) => (dispatch) => { dispatch({ type: SHOW_ALERT_CONFIRM, payload: { title: msg.title, body: msg.body, ...

Is it possible to retrieve the original array after removing filters in Angular?

Within my component, I have an array that I am filtering based on a search string. The filtering works as expected when the user inputs characters into the search field. However, I am encountering an issue when attempting to display all records again after ...

Jquery double-click Event Not Functioning Properly

I've been attempting to toggle the visibility of my footer navbar while also changing the chevron icon. When the navbar is hidden, I want the chevron pointing up to be displayed, and when the navbar is shown, I want the chevron pointing down to be dis ...

Tips for creating several high charts using ng-repeat

I am looking to create multiple charts, as I can currently only generate one. Any advice on how to use ng-repeat for this? Here is the JSON data for the multiple charts: [ { "id": 123, "seriesData": [ { "name": "Times", "d ...

The term 'MapEditServiceConfig' is being incorrectly utilized as a value in this context, even though it is meant to refer to a type

Why am I receiving an error for MapEditServiceConfig, where it refers to a type? Also, what does MapEditServiceConfig {} represent as an interface, and what is the significance of these brackets? export interface MapEditServiceConfig extends AppCredenti ...

While iterating over the key with a variable in a loop, only one property is displayed consistently instead of four different

Currently, I am working on creating an address book using JavaScript. The problem I am facing is that the properties of my objects are not providing me with the necessary information. I need 4 different properties instead of 4 loops with the same property. ...

What could be causing the Ajax error to occur in my .Net Data table?

While trying to load a table, I encountered an ajax error in the datatable (.net). Below is the code for my data table: <table id="productsTable" class="table table-striped table-bordered"> <thead> <tr> <th>Name</th ...

I'm puzzled as to why, but my code seems to be causing an issue with the command prompt, possibly due

Recently, I've been taking on the challenges of Advent of Code. Day 2 has me stumped, as there's a peculiar issue with the code when running it through node.js in the command prompt: const fs = require("fs"); var valid = fs.readFileSync("inpu ...

Encountered an Error with My Protractor Script - Object Expected

Currently, I am in the process of learning automation testing for an AngularJS application. However, I have encountered an "object expected" error on line 4, which is pointing to the first line of my script. describe("Homepage", function() { it("Navig ...

Obtain the result of the Mongoose find operation

Greetings, I am facing a challenge with accessing elements returned from a find operation in Mongoose due to the asynchronous nature and callback functions. Below is the code for reference: function retrieveBudgets(email, callback) { models.User.f ...

Has anyone else encountered the issue where the JavaScript for Bootstrap version 4.3.1 is malfunctioning on Firefox version 65.0.1?

While browsing through the bootstrap v 4.3.1 documentation on firefox v 65.0.1, I noticed an issue with the javascript not functioning properly. For instance, the carousel component is not progressing to the next slide with its transition animation as it s ...

Tips for successfully parsing JSON data during an Ajax call

After making an Ajax call, the response.responseText I receive looks like this: . "[ columns :[ { "id":"name", "header":"User name" }, { "id":"birth", "header":"Date of birth" } ], ...