我如何在angular js中使用ng-repeat遍历json对象数组？

Question

i am trying to iterate over array of objects in angular js but i am getting error as cannot set property of undefined even though i had defined it.

Please find my code below : 


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

    app.service('MyTaskService', function($http) {
        var services = {
            userList: userList,
        };
        function userList(req) {
            if (req == undefined)
                req = {};
            return $http({
                url: "https://jsonplaceholder.typicode.com/posts",
                method: "GET",
                data: req
            });
        }
        return services;
});


app.controller('MyTaskController', function($scope, MyTaskService) {
    $scope.resp  = {};
    $scope.getPrjDetails = function() {
    try {
                var promise = MyTaskService.userList();
                promise.then(function (sucResp) {
                    try {
                       $scope.resp  = sucResp.data;
                    } catch (exception) {
                        console.log(exception);
                        return;
                    }
                }
                , function (errResp) {
                   console.log(errResp);
                    return;
                });
            } catch (exception) {
                console.log(exception);
                return;
            }
    }
});

Find my template :

<ul>
   <li ng-repeat="myData in resp">{{myData.id}}</li>
</ul>

how can i iterate over all the json values and display in my textboxes in template or my list?

<div ng-app="myDemoApp">
    <div ng-controller="MyTaskController">
    <table tyle="float:right;">
        <tr><h3>New Project Form</h3></tr>
        <tr>
            <td class='padding-to-controls'>Get Project Details</td>
            <td class='padding-to-controls'>
                <select ng-change="getPrjDetails()" ng-model="select_project" > 
                    <option value=''>Select Project Details</option>
                    <option value='get-details'>Get Project Details</option>
                </select>
            </td>
        </tr>
        <tr>
            <td class='padding-to-controls'>New Project Name <span>*</span></td>
            <td class='padding-to-controls'> <input type = 'text' ng-model="project_name" ></td>
        </tr>
         <tr>
            <td class='padding-to-controls'>Assign location to project <span>*</span></td>
            <td class='padding-to-controls'> <input type = 'text' ng-model="assign_location" ></td>
        </tr>
         <tr>
            <td class='padding-to-controls'>Area </td>
            <td class='padding-to-controls'><input type = 'text' ng-model="area"  ></td>
        </tr>
         <tr>
            <td class='padding-to-controls'>City</td>
            <td class='padding-to-controls'><input type = 'text' ng-model="city" ></td>
        </tr> 
         <tr>
            <td class='padding-to-controls'>State </td>
            <td class='padding-to-controls'><input type = 'text' ng-model="state" ></td>
        </tr>
         <tr>
            <td class='padding-to-controls'>Cluster</td>
            <td class='padding-to-controls'><input type = 'text' ng-model="cluster" ></td>
        </tr> 
         <tr>
            <td class='padding-to-controls'>Region</td>
            <td class='padding-to-controls'><input type = 'text' ng-model="region" ></td>
        </tr> 
         <tr>
            <td class='padding-to-controls'>Type <span>*</span> </td>
            <td class='padding-to-controls'><input type = 'text' ng-model="type" ></td>
        </tr>
         <tr>
            <td class='padding-to-controls'>Priority <span>*</span></td>
            <td class='padding-to-controls'><input type = 'text' ng-model="priority" ></td>
        </tr>
         <tr>
            <td class='padding-to-controls'>Name of approver<span>*</span></td>
            <td class='padding-to-controls'><input type = 'text' ng-model="name_approver" ></td>
        </tr>
         <tr>
            <td class='padding-to-controls'></td>
            <td class='padding-to-controls'><button ng-click="getPrjDetails()">EDIT</button></td>
        </tr>
        </table>
    </div>
</div>

please find link to my json i am trying to access :: https://jsonplaceholder.typicode.com/posts

Answer 1

When dom is first rendered, angular start searching for resp.data , which in your case is undefined and so angular will complain.

You don't need to pass $scope variables to any of the controller functions. They can access it directly.

In your whole code, you are never ever setting $scope.resp .

Your html context is way different from what you are trying to do. So I have modified it a bit. Try following code:

HTML:

<div ng-app="myDemoApp">
  <div ng-controller="MyTaskController">
    <h3>Feeds</h3>
    <button ng-click="getPrjDetails()">Load</button>

    <div ng-repeat="myData in resp.data">
      <span> {{myData.id}}</span>
      <input ng-model="myData.title" type="text" />
    </div>

  </div>

Angular

app.controller('MyTaskController', function($scope, MyTaskService) {

  // Required
  $scope.resp = {
    data: []
  }

  $scope.getPrjDetails = function() {
    try {
      var promise = MyTaskService.userList();
      promise.then(function(sucResp) {
        try {
          var resp = sucResp.data || [];

          // You must update $scope.resp.data 
          $scope.resp.data = resp;

          console.log($scope.resp.data);
        } catch (exception) {
          console.log(exception);
          return;
        }
      }, function(errResp) {
        console.log(errResp);
        return;
      });
    } catch (exception) {
      console.log(exception);
      return;
    }
  }

})

fiddle working