Having trouble with Ng-repeat not functioning properly on arrays of objects?

I have an array of objects that I fetched from the server. The query is working fine, but when I try to use the ng-repeat directive in my HTML view, nothing is being displayed. Why could this be happening? Here is the JavaScript code:

$scope.companyList = [];

$scope.getCompanyList = function() {
    $scope.companyList.length = 0;

    CompanyListSrv.getCompanyListDetail(function (companyListDetail) {
        if (companyListDetail) {
            $scope.companyList = companyListDetail;
        }
    });
};

$scope.getCompanyList();

HTML code:

   <tr ng-repeat="company in companyList">
     <td>{{ company.name }}</td>
     <td>{{ company.email }}</td> 
   </tr>

This is the array that was returned from the server:

companyListDetail: Array[2]
  0: Object
  1: Object
  length: 2

This is one of the objects in the array:

email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aadecfd2deeadecfd2de84c9c5c7">[email protected]</a>"
name: "Company 2"

There are no errors in the console. However, in the browser, the HTML page shows:

<!-- ngRepeat: company in companyList -->
javascriptarraysangularjsangularjs-ng-repeat

Answer №1

$scope.companyList.length = 0; // This line effectively empties the array without changing the reference

CompanyListSrv.getCompanyListDetail(function (companyListDetail) {
    if (companyListDetail) {
        $scope.companyList = companyListDetail; // However, this line assigns $scope.companyList to a new reference which causes issues with angular $watch mechanism
    } 
});

The problem arises because the angular $watch mechanism only checks if the object has changed and retains its initial reference.

When you use console.log(), it works because the function is given the new reference of the object.

One way to resolve this issue is:

if (companyListDetail) {
     for (var i = 0; i < companyListDetail.length; i++){
         $scope.companyList.push(companyListDetail[i]);
     }
}

Answer №2

Give this a try, it should resolve the issue:

Make sure to include the <table> tag in your HTML code.

HTML Code:

<div ng-app ng-controller="LoginController">
<table>
<tr ng-repeat="company in companyList">
     <td>{{ company.name }}</td>
     <td>{{ company.email }}</td> 
   </tr>
</table>

</div>

JavaScript Code:

function LoginController($scope) {
  $scope.companyList = [];

$scope.getCompanyList = function() {
    $scope.companyList.length = 0;
    var companyListDetail = [{
  email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2e5d474a464f405a4d6e49414149424b004d4143">[email protected]</a>",
  name: "Sidhant"
  },
  {
  email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="acdfc5c8eccbc3c3cbc0c982cfc3c1">[email protected]</a>",
  name: "Chopper"
  }]

            $scope.companyList = companyListDetail;
            console.log($scope.companyList);
};

$scope.getCompanyList();
}

See the working demo here: https://jsfiddle.net/Lt7aP/2864/

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

Issue with Object.keys printing in an abnormal manner

My goal is to extract only the keys from an object, but instead of getting the desired output with the keys, I am seeing numbers. Here is the code snippet: data = {"property" : "{\"animalID\": \"12345\" ...

javascriptjsontypescript

The art of selecting elements and attaching event listeners in a React environment

Currently, I am working on my portfolio website using Gatsby. The layout includes a sidebar on the left with navigational links (Home, About, Work, etc.), and the main content is displayed as one long strip of sections on the right. When a user clicks on a ...

javascriptcssreactjsevent-listener

Guide on converting a date input to a timestamp

I am trying to convert the date retrieved from an HTML5 date input into a timestamp and store it as a variable. HTML: <form> <section class="input"> <input type="date" id="date" name="maintenanace_date"/> </section> <sectio ...

javascripthtml

Transitioning from using sendfile() to sendFile() function within the Express framework

Here is the code snippet I am using: router.get('/image',(req,res,next)=>{ const fileName = "path_to.jpg" res.sendfile(fileName,(err)=>{ if (err) { next(err); } else { console.log('Sent:', fileName); } ...

javascriptexpress

Updating a slider based on the values of two other sliders can be achieved by implementing a

I am working on a project that involves three input sliders. I need the third slider to display the product of the values from the first two sliders. Additionally, I want the value of the third slider to update dynamically whenever the values of the first ...

javascripthtmlangularjsslider

Arranging currency values in Angular's UI-Grid widget

Need help sorting a grid column with dollar values that include $ and , as the sorting is not functioning correctly. Is there a solution to make the sorting work, or should I convert the values to numbers and then display them as money? Here is what I cur ...

angularjssortingangular-ui-grid

What is the best way to display a component with multiple pieces of content?

I have a tool that generates card components, extracting data from a const array and displaying it in a table format within a card UI component. I am looking to add an ADD button inside each card to open a modal with input fields. However, the issue is tha ...

javascriptreactjs

JavaScript: Invoking a nested function within a namespace

script1.js var MyNamespace = {}; MyNamespace.addNewFunction = function(a,b,c) { function doSomething() { // Perform some action here } } script2.js MyNamespace.addNewFunction.doSomething() ?? I’m a bit unsure on how to access the content ...

javascriptfunctionconstructornamespacesprototype

Best practice for Protractor testing: How to click a button based on text or class?

I wrote some code <div class="button-wrapper"> <button class="continue enabled">Continue</button> </div> Currently, I am working on an end-to-end test using Angular JS. I attempted to use element(by.buttonText('Continue& ...

angularjsprotractorgulp-protractor

Integrate Form.io with a SQL Server database

I'm looking for guidance on connecting SQL Server data with form.io. I've already created a basic form in the form.io application and embedded it into my project. Now, I'd like to store the submitted data in an SQL Server database. Any assis ...

angularjsasp.net-mvcsql-server-2012formio

Issue with npm configuration permissions

I am encountering permission issues when using the npm config command. It appears that there is an attempt to alter the owner of my ~/.npmrc file without authorization. Upon executing npm config set color false, I encounter the following error: npm ERR! E ...

javascriptnode.jsubuntunpm

Guide to setting up the airtable.js module on your system

Perhaps this question might seem silly, but I am brand new to JavaScript and I am trying to use the Airtable API. I downloaded Airtable.js from https://github.com/Airtable/airtable.js, extracted the files to my D: drive, and then attempted to type "npm ins ...

javascriptnode.jsapinpmairtable

There seems to be an issue with ngOptions in Angular as it is

Calling all angularjs experts for assistance... Currently integrating cake with angular. Utilizing a rest controller to enable communication and retrieve options in a serialized json format as displayed below Attempting to populate dropdown options: &l ...

javascriptjsonangularjscakephp

What is the method for determining the new point coordinates and direction vector after a rotation of degrees in three.js?

How can I determine the coordinates of point A to H after rotating a certain number of degrees and aligning them with direction vector (-42, 51, 11) using three.js? Thank you in advance for your help and please forgive any mistakes in my English. Best reg ...

javascriptthree.jsrotation

"The orderBy function in AngularJS seems to be overlooked or not functioning properly within the

It seems like the orderBy function is being ignored in my code. Despite adding a console.log for testing purposes, the function doesn't appear to be called at all. As a result, the data is still displayed but remains unordered. Snippet of HTML Code ...

angularjs

Transferring data from a database on Express back-end to a React front-end

I am facing an issue while trying to display user information on the front-end. Even though I can access the server using localhost:8080/api/user and see the information in the form of an empty page, my content page is unable to render this data. The code ...

javascriptnode.jsreactjsexpress

Eliminate duplicated partial objects within a nested array of objects in TypeScript/JavaScript

I'm dealing with a nested array of objects structured like this: const nestedArray = [ [{ id: 1 }, { id: 2 }, { id: 3 }], [{ id: 1 }, { id: 2 }], [{ id: 4 }, { id: 5 }, { id: 6 }], ] In the case where objects with id 1 and 2 are already grou ...

javascriptarraystypescriptmultidimensional-array

JavaScript: Working with Nested Callbacks and Retrieving MySQL Data

As I dive into the world of JavaScript server-side code, I find myself grappling with a common issue that many programmers face. In my previous experience with MySQL select queries in PHP, I would simply grab a result and loop through each row, performing ...

javascriptscopeserverside-javascript

Hold off on running addThis

My website utilizes Google Maps along with my own JavaScript functions. Additionally, I am integrating the AddThis JavaScript for social sharing buttons. For optimal performance, I need both my custom JavaScript and Google's JavaScript to load and exe ...

javascriptjqueryaddthisdomready

Type-safe Immutable.js Records with TypeScript

I'm struggling to find a suitable solution for my query. I am aiming to define data types using an interface in TypeScript, but my data consists of Immutable.js records making it more complex. Please refer to the example provided below. interface tre ...

javascriptangulartypescriptimmutable.js