2015-08-25 8 views
12

मैं एनजी-दोहराना निर्देश का उपयोग करके एक एपीआई को कोणीय अनुरोध का उपयोग करके एक HTML तालिका पॉप्युलेट करने का प्रयास कर रहा हूं। एचटीएमएल पेज पहले लोड होता है तो अनुरोध डेटा लौटने के लिए अनुरोध किया जाता है जो प्रतिक्रिया लौटाते समय टेबल भरता है। जब मैं, एनजी-दोहराने निर्देश तालिका से भर जाता है और फिल्टर कार्यों के लिए एक फ़िल्टर जोड़ें हालांकि मेरी क्रोम ब्राउज़र कंसोल में मैं निम्नलिखित त्रुटि मिलती है:कोणीय त्रुटि: [फ़िल्टर: नोटरायरे] अपेक्षित सरणी लेकिन प्राप्त: {} एक एनजी-दोहराने पर फ़िल्टर के साथ

Error: [filter:notarray] Expected array but received: {} http://errors.angularjs.org/1.4.3/filter/notarray?p0=%7B%7D at REGEX_STRING_REGEXP (angular.js:68) at angular.js:18251 at Object.fn (app.js:185) at Scope.$get.Scope.$digest (angular.js:15683) at Scope.$get.Scope.$apply (angular.js:15951) at bootstrapApply (angular.js:1633) at Object.invoke (angular.js:4450) at doBootstrap (angular.js:1631) at bootstrap (angular.js:1651) at angularInit (angular.js:1545)

मैं plunker पर एक नमूना की स्थापना की है, नमूना चलाने पर कंसोल में त्रुटि भी प्रदर्शित होती है:

http://plnkr.co/edit/J83gVsk2qZ0nCgKIKynj?

एचटीएमएल:

<!DOCTYPE html> 
<html> 
<head> 
    <script data-require="[email protected]*" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script> 
    <script data-require="[email protected]*" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-route.js"></script> 
    <script data-require="[email protected]*" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-resource.js"></script> 
    <script type="text/javascript" src="example.js"></script> 
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet" /> 
</head> 
<body ng-app="inventoryManagerApp"> 
    <h3>Sample - Expected array error</h3> Filter 
    <input type="text" id="quoteListFilter" class="form-control" ng- model="search" /> 
    <div ng-controller="QuoteController"> 
    <table class="table table-bordered"> 
     <tbody> 
     <tr> 
      <th>Specification</th> 
      <th>Quantity</th> 
     </tr> 
     <tr ng-repeat="quote in quotes | filter:search"> 
      <td>{{quote.SpecificationDetails}}</td> 
      <td>{{quote.Quantity}}</td> 
     </tr> 
     </tbody> 
    </table> 
    </div> 
</body> 
</html> 

जावास्क्रिप्ट:

var inventoryManagerApp = angular.module('inventoryManagerApp', [ 
    'ngResource', 
    'quoteControllers' 
]); 

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

quoteControllers.controller("QuoteController", ['$scope', 'filterFilter', 'quoteRepository', 
    function($scope, filterFilter, quoteRepository) { 

    $scope.quotes = quoteRepository.getQuoteList().$promise.then(
      function (result) { 
       $scope.quotes = result; 
      }, 
      function() { 
      } 
     ); 
    } 
]); 

inventoryManagerApp.factory('quoteRepository', 
    function($resource) { 
    return { 
     getQuoteList: function() { 
     return $resource('http://drbsample.azurewebsites.net/api/Quotes').query(); 
     } 
    }; 
    }); 

यह डेटा के साथ क्या करना एनजी-दोहराने के निर्देश पृष्ठ लोड पर तत्काल उपलब्ध नहीं किया जा रहा है को भरने के लिए कुछ हो रहा है। जब मैं एपीआई से डेटा का अनुरोध करने के बजाय पेज लोड पर जेसन डेटा के साथ $ scope.quotes को प्रतिस्थापित करता हूं तो त्रुटि नहीं मिलती है।

उत्तर

22

समस्या इस काम के साथ है:

$scope.quotes = quoteRepository.getQuoteList().$promise.then(
     function (result) { 
      $scope.quotes = result; 
     }, 
     function() { 
     } 
    ); 

समारोह .then() एक और वादा ऑब्जेक्ट चेनिंग अनुमति देने के लिए: .then().then(), और क्योंकि यह एक वस्तु है कि रिटर्न क्यों अपने notarray त्रुटि प्राप्त।

संदर्भ त्रुटि से बचने के लिए आप $scope.quotes को पहले खाली रिक्त स्थान के रूप में निर्दिष्ट कर सकते हैं, फिर इसके परिणाम दें।

$scope.quotes = []; 
quoteRepository.getQuoteList().$promise.then(
     function (result) { 
      $scope.quotes = result; 
     }, 
     function() { 
     } 
    ); 
7
$scope.quotes = quoteRepository.getQuoteList().$promise.then(

असाइनमेंट बेकार है। बस लाइन से $scope.quotes = हटाएं अपनी समस्या को हल करना है।

वादा। फिर एक वस्तु वापस कर रहा है जो दोहराने के बयान के लिए बेकार है।

0

$ http विरासत वादे विधियों। असफल और आतंक को हटा दिया गया है और कोणीय v1.6.0 में हटा दिया जाएगा। इसके बजाए मानक .then विधि का प्रयोग करें।

अब तो फिर विधि रिटर्न कई तत्वों के साथ वस्तु:

$http.get('https://example.org/...') 
    .then(function (response) { 

    console.log(response); 

    var data = response.data; 
    var status = response.status; 
    var statusText = response.statusText; 
    var headers = response.headers; 
    var config = response.config; 

    console.log(data); 

}); 
0
quoteRepository.getQuoteList().then(
    function (result) { 
     $scope.quotes = result; 
    }, 
    function() { 
    } 
); 
: डेटा, स्थिति, आदि तो आप बस प्रतिक्रिया के बजाय response.data उपयोग करने की आवश्यकता
संबंधित मुद्दे