No data appearing in Angular ngrepeat when attempting to display array of objects

Can someone help me figure out why my Angular code is not displaying data in ngrepeat?

Here's a jsfiddle link for reference: http://jsfiddle.net/e0e7dee5/

<div ng-controller="MyCtrl">
    <div class="container-fluid">
        <div ng-repeat="u in utilities.all">
            {{u.name}}
        </div>
    </div>
</div>

Does the above code look correct?

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
    //var utilities = this;

    var utilities = {};

    utilities.all = [{ .... }];   // this is my data  it is in the fiddle
    console.log(utilities.all);  // this displays array of objects

}
javascriptangularjs

Answer №1

Consider updating the line var utilities = {}; to $scope.utilities = {};

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
//var utilities = this;

  $scope.utilities = {};

  $scope.utilities.all = 
    [{
      "programId": 1062,
      "name": "Atlantic City Electric",
      "utilityTypeName": "Electric",
      "programName": "Test Program 24",
      "rate": 0.0775,
      "term": 12,
      "serviceReference": false,
      "accountNumberTypeName": "Account Number",
      "accountNumberLength": 10,
      "msf": 4.95,
      "etf": 100,
      "unitOfMeasureName": "KwH",
      "meterNumberLength": null,
      "zip": "85281",
      "$$hashKey": "object:325"
    }, {
      "programId": 1063,
      "name": "Atlantic City Electric",
      "utilityTypeName": "Electric",
      "programName": "Test Program 12",
      "rate": 0.0875,
      "term": 24,
      "serviceReference": false,
      "accountNumberTypeName": "Account Number",
      "accountNumberLength": 10,
      "msf": 5.95,
      "etf": 150,
      "unitOfMeasureName": "KwH",
      "meterNumberLength": null,
      "zip": "85281",
      "$$hashKey": "object:326"
    }, {
      "programId": 1064,
      "name": "Atlantic City Electric",
      "utilityTypeName": "Gas",
      "programName": "Test Gas Program 12",
      "rate": 0.555,
      "term": 12,
      "serviceReference": false,
      "accountNumberTypeName": "Account Number",
      "accountNumberLength": 10,
      "msf": 1,
      "etf": 10,
      "unitOfMeasureName": "Therm",
      "meterNumberLength": 5,
      "zip": "85281",
      "$$hashKey": "object:333"
    }];
 

}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
 
 <div class="container-fluid" ng-repeat="u in utilities.all">
   <div>
   {{u.name}}
   </div>
 </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

Inquiries regarding the use of callback functions in Jquery for ajax requests

Take a look at this code snippet: $("#someid").autocomplete({ source: function (req, resp) { $.ajax({ url: "/api/someapi", type: "GET", dataType: "json", data: { id: req.someid }, b ...

javascriptjqueryajax

Issue with AngularJS directive template not accepting function parameter

Exploring the world of AngularJS for the first time and I've encountered an issue with a directive I'm working on. I am trying to set the ng-click function in the template dynamically by passing in a function name, but it doesn't seem to be ...

angularjsangularjs-directive

Tips for locating the ID of an object in an array when only one attribute in the "child" array is known

Seeking assistance in creating a JavaScript function that efficiently determines the id of the "parent" object based on the code of a "child" object from the dataArray. For example: getIdParent("240#code") -> should return "1" [ { id: 0, ...

javascriptarraysjsonreactjsreduce

When attempting to reference from a variable, you may encounter an error stating that setAttribute

In my VueJS project, I am facing an issue with dynamically adding the width attribute to an inline SVG code stored in a variable called icon. Despite having the correct SVG icon code in the variable, the setAttribute method is not working as expected and t ...

javascriptvue.jssvg

Ways to obtain the <a> using the title attribute

Is there a way to remove 3 classes from a specific <a> element that is dynamically generated? The only constant is the title. How can I locate an element based on its title? I've searched online but haven't found exactly what I'm looki ...

javascriptjquerycss

Interactions between JavaScript and PHP scripts within a web application

THE SCENARIO In the midst of creating a web application that dynamically loads content by fetching data from a MongoDB database where items and their respective authors are stored in separate collections within the same database. The author's ID is s ...

javascriptphpjqueryajaxmongodb

`What purpose does the data-view attribute serve in Durandal JS?`

While experimenting with the Durandal JS starter kit application, I happened to view the page source in Mozilla browser and noticed the following. <div class="" data-view="views/shell" style="" data-active-view="true"> </div> I couldn't ...

javascripthtmldurandal

Ways to effectively conceal an HTML div element with CSS or JavaScript

Is there a way to hide the div element that is nested inside a bootstraps radio or checkbox container using jquery? I'm unable to upload an image, but here is a preview: http://prntscr.com/6wrk2m <style> .my-radio{ border: 1px solid #F0F; } &l ...

javascriptjqueryhtmlcsstwitter-bootstrap

discord.js embed message not displaying text correctly in Upper and Lower case

I created a custom "test" command and I want it to be case-insensitive so that it works regardless of whether the user types -test, -Test, -TEST, etc. Currently, it only responds to lowercase -test commands. I tried changing the toLowerCase(); method to to ...

javascriptnode.jsdiscord.js

Exporting Material UI v1 components with Redux: A step-by-step guide

In my current project, I am integrating Material-UI v1 with stajuan's Redux-Saga Login template that can be found here. My goal is to merge the functionality of exporting the default class from both by combining two functions. Here is a snippet of the ...

javascriptreactjsecmascript-6react-reduxmaterial-ui

To ensure a successful redirection process without information loss, it is essential to address any potential issues with data input into

How can I properly implement a page redirection? Below are the relevant code snippets. <link rel="stylesheet" type="text/css" href="payout.css"/> <font face='calibri'> <?php session_start(); $conn = @mysql_connect("localho ...

javascriptphpmysqlhttp-redirect

Ways to identify modifications in a multidimensional array model using AngularJS

Is there a way to trigger an event when changes are made to my multidimensional scope variable, such as adding or removing elements? I've attempted to use both $scope.$watch and $scope.$watchCollection, but haven't had any success. Let me outlin ...

angularjsmultidimensional-arrayangularjs-scope

NodeJS experiencing a hitch in the image upload process

I am currently working on a Node code snippet that is used for uploading images. The images I am dealing with have sizes ranging from 10 to 200K, so they are relatively small in size. However, the issue I am facing is that Node seems to get stuck process ...

javascriptnode.jsexpress

The functionality of async.series and async.each is not behaving as anticipated

I am currently working on developing a web scraping tool using nodeJS to extract image URLs from a website's HTML, store them in a cache, and then identify the largest image based on file size. However, I'm facing an issue where the function de ...

javascriptnode.jsasynchronousnode-async

Removing a row from the database using AngulaJS Ui-Grid

Greetings! I am currently working on a small application utilizing AngularJS and Ui-grid. One of the pages displays all rows from a specific table within the Ui-grid. The grid includes a delete button in the last column for removing individual rows. Below ...

angularjs

What is the best way to combine Bootstrap and custom CSS, specifically the home.module.css file, in a React project?

I'm currently experimenting with utilizing multiple classes to achieve an elevated button effect and a fade animation on a bootstrap card. Here's the code snippet I've been working on: import Head from 'next/head' impo ...

javascriptreactjswebnext.js

Is employing setTimeout a legitimate technique for circumventing a stack overflow issue when implementing callbacks?

Let's imagine a scenario where I deliberately create a complex sequence of callbacks: function handleInput(callback) { ... } function fetchData(url, callback) { ... } function processResponse(callback) { .... } function updateDatabase ...

javascriptcallbackstack-overflow

What causes the error of 'undefined' when I try to append an HTML string to the main page with jQuery?

Looking for some advice on JavaScript and jQuery as I am relatively new to these languages. Currently working on a card game that will be played on one screen using JavaScript. Within the playerHand ID div, I have implemented a JavaScript function to disp ...

javascriptjqueryhtml

Is there a way to transmit data to another page upon clicking a button?

Greetings! As I work on developing an ASP.NET JavaScript application in SharePoint, I encounter a specific issue. My project consists of two pages: default.aspx and addnewitem.aspx. On the default.aspx page, there is a gridview with an edit button. Ideally ...

javascriptjqueryasp.net

The Formik Material UI Localization Provider is not functioning properly when paired with the Luxon Adapter for formatting dates in

Currently, I am utilizing the MUI localization provider in conjunction with the luxon adapter to transform the date format to GB. However, despite my efforts, the date remains in the mm/dd/yyyy format rather than displaying as dd/mm/yyyy. Please refer ...

javascriptreactjsmaterial-uiluxonformik-material-ui