Angular looping does not display data as expected

Question

Angular looping does not display data as expected

I am trying to display data from a JavaScript for loop inside a modal using ng-repeat for detailed information. Below is the snippet from my .js file:

$http.get('.....').then(function(response){
                $scope.coba = response.data;
                $scope.totalItems = $scope.coba.length;
                for (var i = 0; i <= $scope.totalItems ; i++) {
                  $scope.coba2 = JSON.parse($scope.coba[i].additionaldata_pay);
                  return i;
               };

However, when I execute it, the details do not show anything, as shown in this screenshot:

https://i.sstatic.net/qkHnN.png

Here is my modal in .html:

<h4 class="modal-title">Detail </h4>
                        </div>
                        <div class="modal-body" ng-repeat="item2 in coba2">
                            <p>{{item2.label}}</p> <p>{{item2.value}}</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>

The response of scope coba in ARC contains the following fields:

"customerid": ".....",
"paydate": ".....",
"amount": ".....",
...

javascript angularjs

Answer 1

Answer №1

To optimize your code, ensure that your loop is using additionaldata_pay rather than scope.coba. Also, make sure to check the array condition after parsing your string. Here's a revised version of the code:

angular.module("mod",[]).controller("contr",["$scope", function($scope)
{
  var response={}; 

   response.data = {object1:'', additionaldata_pay:[{lable:'1',value:'1'},
            {lable:'2',value:'2'}]};         
  $scope.coba = response.data;// it should be an array
     if(!angular.isArray($scope.coba.additionaldata_pay)) 
        {
          return false;
        }
      $scope.totalItems = $scope.coba.additionaldata_pay.length;
      $scope.coba2=[];
      for (var i = 0; i <= $scope.totalItems ; i++) {
          $scope.coba2.push($scope.coba.additionaldata_pay[i]);
          };
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="mod" ng-controller="contr">
   <div class="modal-body" ng-repeat="item2 in coba2">
                        <p>{{item2.label}}</p> <p>{{item2.value}}</p>
                    </div>
</div>

EIDT:

response.data must be an array or support parsing as an array if it's a string
Your for loop should depend on an array instead of an object. It is recommended to use the for loop for $scope.coba.additionaldata_pay instead of $scope.coba
Ensure you are checking the array index or object name to display in ng-repeat.

Answer 2

To optimize your code, ensure that your loop is using additionaldata_pay rather than scope.coba. Also, make sure to check the array condition after parsing your string. Here's a revised version of the code:

angular.module("mod",[]).controller("contr",["$scope", function($scope)
{
  var response={}; 

   response.data = {object1:'', additionaldata_pay:[{lable:'1',value:'1'},
            {lable:'2',value:'2'}]};         
  $scope.coba = response.data;// it should be an array
     if(!angular.isArray($scope.coba.additionaldata_pay)) 
        {
          return false;
        }
      $scope.totalItems = $scope.coba.additionaldata_pay.length;
      $scope.coba2=[];
      for (var i = 0; i <= $scope.totalItems ; i++) {
          $scope.coba2.push($scope.coba.additionaldata_pay[i]);
          };
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="mod" ng-controller="contr">
   <div class="modal-body" ng-repeat="item2 in coba2">
                        <p>{{item2.label}}</p> <p>{{item2.value}}</p>
                    </div>
</div>

EIDT:

response.data must be an array or support parsing as an array if it's a string
Your for loop should depend on an array instead of an object. It is recommended to use the for loop for $scope.coba.additionaldata_pay instead of $scope.coba
Ensure you are checking the array index or object name to display in ng-repeat.

Answer 3

Answer №2

When dealing with an array of objects like coba2, consider using the following approach:

        $http.get('.....').then(function(response){
            $scope.coba = response.data;
            $scope.totalItems = $scope.coba.length;
            $scope.coba2 = [];
            for (var i = 0; i <= $scope.totalItems ; i++) {
            $scope.coba2.push(JSON.parse($scope.coba[i].additionaldata_pay));
         };

Answer 4

When dealing with an array of objects like coba2, consider using the following approach:

        $http.get('.....').then(function(response){
            $scope.coba = response.data;
            $scope.totalItems = $scope.coba.length;
            $scope.coba2 = [];
            for (var i = 0; i <= $scope.totalItems ; i++) {
            $scope.coba2.push(JSON.parse($scope.coba[i].additionaldata_pay));
         };

Angular looping does not display data as expected

Answer №1

EIDT:

Answer №2

Similar questions

What is the most effective method in React JS to achieve real-time results with every keystroke by making REST calls to the server?

Sending an empty object from postman in form-data to a node.js server is causing issues

How can Node.js identify the page where visitors entered, the page they are currently on, and the page

Updating data from an ajax call in chart.js can be done with a few simple steps

Switching over to the latest version of Material-UI, v1.x.x

React: Resolving issue of state becoming outdated after fetching data through a network request in the useEffect hook. Stale state no

Deciphering Google location data using JavaScript

What is the best way to iterate through an object and display each item as <li></li> within another <li>?

Send form using AJAX with a callback function

Only the initial setInterval function is currently active, despite multiple being set simultaneously

Delete the tag that comes before

Turn off Node.js Caching for Good

The fade animation on my modal is causing issues in Windows 10

Error alert: The function is declared but appears as undefined

What steps can I take to get a border functioning correctly on my website?

Transforming the button behavior with jQuery

Issue with importing a library into a Next.js component

Rails: jQuery - page refreshes unexpectedly during event execution

Is there a way to display "no results" on the page when the search field is empty, yet still render new results asynchronously while searching?

Utilizing ng-grid to pass variables within cellTemplate