Repeating data multiple times in ng-repeat directive

Website Development

<div ng-app="templeApp" ng-controller="templeList">
                <div ng-repeat="temple in temples track by $index" >

                    <h2>{{temple.strTempleName}}</h2>
                    <h4>{{temple.strTempleDescription}}</h4>
                    <h4>5km from current location</h4>
        </div>  
    </div>

Dev Tools

 var templeApp = angular.module('templeApp', [])
.controller('templeList',function($scope,$http){
    $scope.temples = [{"_id":"new","strTempleName":"Temple 1 Name","strTempleDescription":"Temple 1 description","strContactNumber":"+91899999999","strTempleLocation":"Chennai","iTempleRating":5,"strContactPersonName":"","strTempleCoordinates":""}] ;
    $http.get("https://gist.githubusercontent.com/vigneshvdm/d106ea482a792c60dff8/raw/c8f020eb54c4068e40884b8d84c972d92e8e4e08/vicky%20test%20file").success(function(data){
        $scope.temples = data[0];  //uncomment this line to see error
        console.log(data[0]);
    });
});

Issue encountered

By commenting the $scope.temples = data[0]; line, the ng-repeat function is only displaying data once. However, when the data is assigned to $scope.temples, it appears multiple times.

Click here for demo

Answer №1

It is recommended to eliminate track by $index in the ng-repeat directive and modify the code as shown below:

In this particular case, I have utilized temple.strTempleName for the track by filter to ensure that unique names are returned.

<div ng-app="templeApp" ng-controller="templeList">
      <div ng-repeat="temple in temples track by temple.strTempleName" >
            <h2>{{temple.strTempleName}}</h2>
            <h4>{{temple.strTempleDescription}}</h4>
            <h4>5km from current location</h4>
      </div>  
  </div>

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

Trouble with AJAX Post Request: Missing JSON Response

Below is the AJAX request I have created: var data = modalDom.find("form").serializeObject(); data["returnJson"] = true; $.ajax({ type: "POST", url: "/companies/edit/", data: data, dataType: "JSON", success: function (result) { ...

What is the best way to display multiple values in a single column in a datatable?

This function works effectively in rendering the code: { "data": "assignedTo", "render": function (data) { var btnDetail = "<a href='/Ticket/TicketDetail?ticketI ...

What is the best way to retrieve a string from a lambda expression?

I am trying to call the function myFunction() and retrieve the source._id value, but I'm encountering issues with the current code. Even though source._id is correctly filled, I am unsure of how to successfully return it in its entirety. Ideally, some ...

Using React js to transform objects into arrays for useState

Hey there! I'm currently working on a webshop demo project for my portfolio. I've encountered an issue while trying to fetch data from commerce.js. The data is in the form of objects, which are causing problems when I try to map them. I've a ...

Tips for safely executing an SQL query with electron.js

I have a new project where I need to interact with an SQL database on the local network, but it's not located on the same system I'm working on (not SQLExpress). So far, I've figured out how to collect user input on a webpage and send that ...

BufferGeometry and LineBasicMaterial: adjusting the thickness of line segments

Currently, I am utilizing a THREE.BufferGeometry to effectively manage the color of each segment in the Line by utilizing the color attribute. geometry = new THREE.BufferGeometry(); var material = new THREE.LineBasicMaterial({ vertexColors: THREE.Vertex ...

Utilizing IndexedDB for data storage

Hey there! I am currently working on storing three fields in an IndexedDB. When I view them in the browser, I see the names of each index - content, content2, and content3. However, only data is being saved into content3. Can you help me figure out why? B ...

Angular JS tutorial causing confusion with terminology

I'm currently working on a project and came across a sentence that has me stumped. It mentions potential issues when naming properties in Angular: The statement mentions how any errors related to property access are silently accepted, even if they in ...

Learn how to securely download files from an Azure Storage Container using Reactjs

I'm currently working on applications using reactjs/typescript. My goal is to download files from azure storage v2, following a specific path. The path includes the container named 'enrichment' and several nested folders. My objective is to ...

Experimenting with the useDebounceCallback hook through Jest testing

Currently, I am experimenting with testing debounce functionality using Jest in a component that utilizes URL parameters for search. The function handleSearch makes use of the useDebounceCallback hook from usehooks-ts (which internally uses lodash debounce ...

Get a confirmation from Ajax, PHP, and Mysql after successfully inserting data

Here is my AJAX call to submit a form to a MySQL database using a PHP file on a server: <script type"text/javascript"> $(document).ready(function(){ $("form#submit").submit(function() { // storing form values and sending via AJAX var fn ...

Utilizing a CSV file as a Map with D3 and JavaScript

After thorough research through JavaScript and D3 documentation, I have not been able to find a solution to my problem... Is it feasible to import a CSV file with the following format: header, header string1, string string2, string ... stringN, string an ...

Tips for creating a unique scroll page arrow button with adjustable thickness?

Seeking guidance on how to adjust the thickness of the arrow used as a scroll button on my website. I am aiming for a similar look to the arrow on this particular website: example of arrow https://i.sstatic.net/wO5br.png To view my code, please visit: Cod ...

Cycle through the array to insert pictures into the document

var myApp = angular.module('myApp', []); myApp.controller('ng-angular-pictures', function() { console.log('inside of container'); var vm = this; vm.pictures = ['images/acapul ...

What is the best way to implement TrackballControls with a dynamic target?

Is there a way to implement the three.js script TrackballControls on a moving object while still allowing the camera to zoom and rotate? For example, I want to track a moving planet with the camera while giving the user the freedom to zoom in and rotate ar ...

Forwarding information in the form of JSON data using Node.js

Just starting out with Node.js, I'm looking to set up a simple web server that takes a request URI and queries an internal service for a JSON stream. My code structure would look something like this: http.createServer(function(request, response) { ...

Tips on incorporating JavaScript files into Angular applications

Struggling to incorporate a JavaScript function into Angular, I have installed the plugin "npm I global payments-3ds". I copied the JavaScript files from node_modules and attempted to call them in my component. Below is an example: import { ...

Tips for ensuring the child directive has finished rendering before proceeding?

I am faced with a scenario where one directive is dependent on another: <div style="border:2px solid black;height:150px;padding:10px"> <my-internal-directive></my-internal-directive> <my-internal-directive></my-interna ...

Intermittent connectivity issues causing clients to miss messages from Nodejs server

Currently, I am in the process of setting up a basic node application where visitors can interact with a letter counter on the site. The idea is that every time someone presses a letter, the counter will increase and all users will be able to see it go up ...

Is there a way to display various data with an onClick event without overwriting the existing render?

In the process of developing a text-based RPG using React/Context API/UseReducer, I wanted to hone my skills with useState in order to showcase objects from an onclick event. So far, I've succeeded in displaying an object from an array based on button ...