Delivering objects from controller in AngularJS

I'm currently working on a project where I need to retrieve objects from the controller. Here's a snippet of my code:

score.component.js:

angular.module('score').component('score',{
    templateUrl : 'app/score/score.template.html',
    controller : ScoreController
});


function ScoreController() {

    var returnData = function(){

    return [{
        name: "john",
        totalscore: 13,
        gamesPlayed: 14
    },
    {   name: "andrew",
        totalscore: 1,
        gamesPlayed: 2
    }
    ];
    }
}

score.template.html:

<div ng-repeat="player in $ctrl.returnData">
    {{player.name}}{{player.totalscore}}{{player.gamesPlayed}}
</div>

I can't seem to get it to work as expected, any insights on what could be going wrong? Appreciate your help!

Answer №1

A controller is typically defined by a constructor function, which already has an object linked to it (this). Creating another object within this context can be considered an antipattern, unless that is the intended functionality.

A more appropriate approach would be something along the lines of:

function GameController() {
  this.score = [...];
}

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

Arranging arrangements in javascript

I am dealing with objects that contain the fields id and position. const items = [{id: 11, position: 1}, {id: 12, position: 2}, {id: 13, position: 3}, {id: 14, position: 4}, {id: 15, position: 5}, {id: 16, position: 6}]; These objects represent folders st ...

Transfer the textbox value from page-1 to page-2 seamlessly with the help of AngularJS UI-routing

I'm attempting to transfer the textbox value from Page-1 to Page-2 using the code below, but I am encountering difficulties. Page-1.html <div > <div style="height: 400px"> <h2>Partial view-1</h2> <p> ...

The HTML grid is causing an irritating excess space on the right side of my website

After brainstorming an idea, I decided to create this website for testing purposes. However, the grid layout seems to be causing an unwanted margin on the right side of the page that is not associated with any HTML tag, disrupting the zoom functionality. ...

(JS) utilizing an external .js function by using the <script> tag

Looking to execute the function cookiefix() from main.js, which is linked at the bottom of my HTML file. echo '<body>'; if(!isset($_COOKIE['clicked'])) { if(!isset($_COOKIE['count'])) { echo '<script type="text/ ...

Bootstrap Tags Input - the tagsinput does not clear values when removed

I am attempting to manually remove the input value from bootstrap-tags-input when the x button is clicked, but the values are not changing in either the array or the inputs. This is the code I have tried: $('input').tagsinput({ allowDuplica ...

Choose the option using Angular and .NET Core

I am facing an issue with my Angular controller that handles GET and POST requests for data. I had two controllers working properly, but when I added a third one by combining the previous two, the GET and POST functionalities stopped working. Can someone h ...

Having trouble displaying Ad-Gallery Loader.gif?

Having trouble with an image gallery I found at . The loader.gif image isn't showing up in IE9, just a red X. Being new to JavaScript, I'm struggling to fix this issue located at the top of the JavaScript file. (function($) { $.fn.adGallery = ...

Why am I receiving the error message "Argument of type 'number' is not assignable to parameter of type 'never'?"

import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { showSecret = false; logArr ...

The AngularJS OpenLayers directive encounters issues when used inside an Angular-UI dialog component

I am interested in integrating the AngularJS OpenLayers directive into my webpage. It seems to work fine on its own, but when I try to use it within angular-ui-dialog, it does not function. Despite checking the console for errors, I am unable to determine ...

Button in HTML not functioning as expected

I have 3 different files that are crucial for my webpage to function properly: index.html: <html> <head> </head> <body> <h1>Webpage</h1> <p id = "text">Hello world!</p> <button oncl ...

Struggling with a Bootstrap v5.0.2 Modal glitch? Let's dive into a real-life case study to troub

I am seeking assistance with a problem that I am encountering. I am currently using Bootstrap version 5.0.2 (js and css). Despite coding all the required parameters, I am unable to make the modal functionality work. I have been trying to figure out what&ap ...

Encountering an Internal Server error with Mongoose in Node.js

My latest project is a web application designed for photo sharing. One particular route in the app is responsible for retrieving and displaying photos from all users in the following array. This is the route: router.get('/getphotos',function(r ...

The property 'createDocumentFragment' is not defined and cannot be read in JavaScript code

I'm working on loading data from my database using ajax, but I'm facing an issue with the this method not functioning as expected. Below is a snippet of my source code: $(".cancel-btn").click(function() { var cancelArea = $('.cancel&apos ...

Best Practices for Iterating over Nested Objects and Arrays Using ng-repeat

I've been trying to use Angular's ng-repeat, but nothing seems to work for me. I'm attempting to loop through companies.users and display all the first names. Any assistance would be greatly appreciated! Thank you! <div ng-app="app" ng-c ...

Executing PHP scripts in Javascript to monitor active online users: identifies individuals who are currently not authenticated

I am currently developing a basic admin panel and looking to allow logged in users to view other active users. To achieve this functionality, I have set up a sessions MySQL table containing active session data (logged in users) alongside a PHP file that up ...

Deliver varied asset routes depending on express js

I have a situation where I am working with express routes for different brands. My goal is to serve two separate asset directories for each brand route. One directory will be common for all brand routes, located at public/static, and the other will be spec ...

Is there a way to launch my JavaScript project locally and have index.html served on an npm server?

I am currently attempting to launch a specific Single Page Application (SPA) project using pure JavaScript. This project consists of a script file and an index.html file. I am trying to run this project on my local machine, but it requires that it be hos ...

difficulties with pagination features in AngularJS

I am experiencing an issue with pagination as I am unable to see the buttons (1,2,3.....) for my pagination using this code <div ng-controller="PaginationDemoCtrl"> <table class="table"> <tr ng-repeat="row in data.slice(((curr ...

Exploring the object structure received from AngularFire

Here is the Firebase query that I am running: var ref = new Firebase('https://<myfirebase>.firebaseio.com/companies/endo/status'); data = $firebaseObject(ref); console.dir(data); The object that I receive looks like this: d ...

Unable to edit the current value of an input component in ReactJS

I need to implement a search feature for a list of items using ReactJS. You can view the project on JSBIN. The issue I am facing is that when I input 'mi' in the search box to filter by ID, the filtration works correctly but the input value does ...