2016-06-29 5 views
0

AngularJS에서 "정의되지 않은 속성 ID를 읽을 수 없습니다"라는 오류가 발생합니다.AngularJS가 정의되지 않은 속성 ID를 읽을 수 없음 오류

우리는 두 개의 API 엔드 포인트, I>GET http://127.0.0.1:8088/api/information/

는 JSON에서 데이터를 가져올 수 있습니다.

ii>DELETE http://127.0.0.1:8088/api/information/:id 해당 특정 ID의 데이터를 삭제하십시오.

데이터를 연속으로 표시하는 테이블을 만들었습니다. 행과 삭제 버튼을 선택하는 확인란이 있습니다.

3 가지 작업을 수행하고 있습니다.

i> 테이블의 데이터를 Ftech하십시오. ii> 해당 행을 선택하려면 확인란을 클릭하십시오. iii> DELETE 버튼을 클릭하면 해당 데이터가 디스플레이에서 삭제되고 DELETE API 끝 점이 서버에서 삭제됩니다. iv> 페이지를 새로 고침하고 데이터를 다시 가져옵니다. 여기

는 JSON입니다 : -

여기
{ 
    "1": { 
    "venture": "XYZ Informatics", 
    "member": [ 
     { 
     "name": "abcd", 
     "email": "[email protected]" 
     } 
    ], 
    "message": "This is good day", 
    "isclicked": false 
    }, 
    "2": { 
    "venture": "BBC Informatics", 
    "member": [ 
     { 
     "name": "xyz", 
     "email": "[email protected]" 
     } 
    ], 
    "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> 
+0

코드 형식이 잘못되었습니다. – mkoryak

+0

* 전체 * 오류를 게시하시기 바랍니다 읽지 않습니다. 특히 오류가 발생한 행 번호 – Claies

+0

TypeError : (index)에서 정의되지 않은 'id'속성을 읽을 수 없습니다. 19 – Codelife

답변

0

아니 컴퓨터 근처가 제대로 코드를 테스트 할 수 있지만, 첫 번째 읽기이 날 왼쪽 : 때 delete $scope.datas[key]을 수행하면 data 개체가 파괴됩니다. 따라서 userId을 할당하려고하면 액세스하려는 개체가 존재하지 않습니다. 내 권장 사항은 성공적인 서버 DELETE에서 로컬 항목 제거 만 수행하는 것입니다. 성공 함수로 delete $scope.datas[key]을 이동해보십시오.

별도의 메모에서 .success()은 더 이상 사용되지 않으며 ES6 Promise 호환 .then(successfn, errorfn) 형식을 사용하는 것이 좋습니다. 더 많은 것을 here를보십시오.

관련 문제