Question

我收到错误＆＃34;无法读取未定义的属性ID＆＃34;在AngularJS中。

我们有两个API终点，

I＆GT; GET http://127.0.0.1:8088/api/information/从JSON获取数据。

II＆GT; DELETE http://127.0.0.1:8088/api/information/:id删除该特定ID的数据。

我创建了一个表，数据将按行显示。有一个复选框可以选择行和一个删除按钮。

我正在执行三项操作，

I＆GT; Ftech表中的数据。二GT＆;单击复选框以选择该行。 III＆GT;单击DELETE按钮从显示中删除该数据，并点击DELETE api终点也从服务器中删除。 iv＆gt;刷新页面并再次获取数据。

这是JSON： -

{
  "1": {
    "venture": "XYZ Informatics",
    "member": [
      {
        "name": "abcd",
        "email": "abcd@gmail.com"
      }
    ],
    "message": "This is good day",
    "isclicked": false
  },
  "2": {
    "venture": "BBC Informatics",
    "member": [
      {
        "name": "xyz",
        "email": "xyz@gmail.com"
      }
    ],
    "message": "This is bad day",
    "isclicked": true
  }
}

以下是代码： -

<!DOCTYPE html>
<html ng-app="MyApp">
  <head>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    <style>
      table, th, td {
      border: 1px solid black;
      border-collapse: collapse;
      }
      th, td {
      padding: 15px;
      }
    </style>
  </head>
  <body>
    <div ng-app="MyApp" ng-controller="displayController">
      <table style="width:100%">
        <tr ng-repeat="data in datas">
          <td>
            <input type="checkbox" ng-model="data.clicked">
          </td>
          <td>{{ data.id }}</td>
          <td>{{ data.venture }}</td>
          <td>{{ data.message }}</td>
        </tr>
      </table>
      <button ng-click="delete()">DELETE</button>
    </div>
    <script>
      angular.module('MyApp', [])
      .controller('displayController', function($scope, $http) {
      var url = "http://127.0.0.1:8088/api/information";
      $http.get(url).success(function (response) {
      $scope.datas = response;
      });

      //To Delete 
      $scope.delete=function(){
      angular.forEach($scope.datas, function(val, key){
      if(val.clicked){
      delete $scope.datas[key] 
      var userId = $scope.data.id; //It is coming from {{ data.id }}
      $http.delete('http://127.0.0.1:8088/api/information/:' + userId) //DELETE API end point
          .success(function (response) {
             $scope.refresh(); //Refresher function
          });

      $scope.refresh = function(){
      var url = "http://127.0.0.1:8088/api/information"; //Fetch the updated data
      $http.get(url).success(function (response) {
      $scope.datas = response;
      });
      }

      }
      })
      }

      });
    </script>
  </body>
</html>

Answer 1

没有靠近计算机来正确测试您的代码，但是第一次阅读让我留下了这样的信息：执行delete $scope.datas[key]时，您正在销毁data对象。因此，当您尝试分配userId时，您尝试访问的对象不存在。我的建议是只在成功的服务器上删除本地项目。尝试将delete $scope.datas[key]移动到成功函数中。

另请注意，.success()已弃用，并且最好使用符合ES6 Promise的.then(successfn, errorfn)表单。查看更多here。

AngularJS无法读取未定义错误的属性id

1 个答案: