The ng-repeat directive is not showing the data retrieved from the HTTP request. It appears as a comment when

Question

The ng-repeat directive is not showing the data retrieved from the HTTP request. It appears as a comment when

My

homeController.js

var app = angular.module('myApp');
app.controller('HomeController', 
function($scope, $http, $rootScope, $stateParams, $state, LoginService) {
$scope.user = $rootScope.userName;
console.log("Starting http request");
$http.get("http://127.0.0.1:5000/trying").success(function (response) {
      $scope.myData = response.users;
      console.log(response);
  });
console.log("ending http request");
});

<div class="col-md-12" style="width:500px;">
    <div align="right"><a ui-sref="login">Logout</a></div>
        <h4>Welcome {{user}}! </h4>
        <p><strong>This is Home Page</strong></p>
        <ul>
        <li ng-repeat="x in myData">
            Data are : {{ x.fname + ', ' + x.coordinates }}
        </li>
        </ul>
    </div>

Console

Response object

The home.html page is being loaded from index.html as expected. The user data is showing correctly after logging in. However, the ng-repeat functionality seems to be not working properly. Upon inspecting, it appears that it's being commented out. What could be causing this issue?

javascript angularjs ajax angularjs-ng-repeat

Answer 1

Answer №1

To ensure that $scope.myData is recognized by the view, consider defining it as an array or object outside of the http.get function, right below $scope.user. This way, the view will know what to expect.
Confirm whether myData is an array or object and use the appropriate loop syntax (x in myData vs x of myData). Another option is (dataKey, dataValue) in myData.
For content dependent on an http call, add ng-if="!isLoading" to ng-repeat. Initialize isLoading as true in this.$onInit function and set it to false in the response after the http get request completes.

`

this.$onInit = function(){
  $scope.isLoading = true;
  // rest of the stuff like http.get...
  $http.get("http://127.0.0.1:5000/trying").success(function (response) 
    $scope.myData = response.users;
    $scope.isLoading = false;
    console.log(response);
  });
};

`

If you're still experiencing issues with your view's behavior, let me know. It's possible there may be another reason causing the view not to update.

PRO TIP: Ensure that the initial definition of $scope.myData matches the type of variable being returned. Avoid declaring as [] but later filling in as {} with an api call.

This issue can be challenging since vanilla JavaScript allows for variable type swapping without strict enforcement. Some developers prefer TypeScript or other JavaScript alternatives for more concrete typing rules. But that's a topic for another discussion entirely.

Answer 2

To ensure that $scope.myData is recognized by the view, consider defining it as an array or object outside of the http.get function, right below $scope.user. This way, the view will know what to expect.
Confirm whether myData is an array or object and use the appropriate loop syntax (x in myData vs x of myData). Another option is (dataKey, dataValue) in myData.
For content dependent on an http call, add ng-if="!isLoading" to ng-repeat. Initialize isLoading as true in this.$onInit function and set it to false in the response after the http get request completes.

`

this.$onInit = function(){
  $scope.isLoading = true;
  // rest of the stuff like http.get...
  $http.get("http://127.0.0.1:5000/trying").success(function (response) 
    $scope.myData = response.users;
    $scope.isLoading = false;
    console.log(response);
  });
};

`

If you're still experiencing issues with your view's behavior, let me know. It's possible there may be another reason causing the view not to update.

PRO TIP: Ensure that the initial definition of $scope.myData matches the type of variable being returned. Avoid declaring as [] but later filling in as {} with an api call.

This issue can be challenging since vanilla JavaScript allows for variable type swapping without strict enforcement. Some developers prefer TypeScript or other JavaScript alternatives for more concrete typing rules. But that's a topic for another discussion entirely.

The ng-repeat directive is not showing the data retrieved from the HTTP request. It appears as a comment when

homeController.js

Answer №1

Similar questions

Be mindful of potential missing dependencies when utilizing event listeners and states within useEffect

How can I configure Grails to properly interpret my JSON PUT AJAX request?

Why does a boolean value behave this way in JSX, specifically when used in a checkbox scenario?

Unable to detect ajax request in CakePHP 2x

Discover the best practices for utilizing CSS selectors reliably in puppeteer

jQuery sending a GET request but receiving null parameters in an MVC controller

Play a diverse selection of audio variables at random

Ten instances of $digest() being triggered upon the implementation of custom filters

Executing a Python script to run the main.js and require.js files

The Protractor actions().mouseMove function does not seem to function properly in Firefox and IE, although it works perfectly in Chrome

Error in Firefox: The Ajax request was not sent for unknown reasons

Looking to achieve a mouse over effect in jQuery?

Extract the input value from the bootstrap-datepicker using JavaScript

Upload files via Ajax request is required

Verifying WordPress slug existence using AJAX

Ways to extract the ID by iterating through buttons

Interactive jQuery slideshow showcasing top content

A complex valueOf function in Javascript

"Exciting Changes in Color According to the Active State of vue-route-link

Retrieve the result of the Object match operation