使用AngularJS從json檢索數據

我正在從頭開始學習角度js，目前正試圖從json文件中檢索數據。使用AngularJS從json檢索數據

我正在使用 - nodejs，express，AngularJS。

早些時候，我在使用得到一個錯誤「意外令牌d」 -

$http.get("/models/driversList.json").success(function(response){$scope.driversList = response})

這得到了解決，但現在我得到這樣的事情與當前的代碼 -

Drivers Championship Standings 
1

我猜測迴應基本上是空白的，因此「1」卻沒有理解爲什麼會發生這種情況。

下面是我的文件 -

/app.js

app.use('/models',express.static(path.join(__dirname, 'private/data/db/models'))); 
app.use(express.static(path.join(__dirname, 'public'))); 
app.use('/scripts',express.static(path.join(__dirname, 'public/javascripts'))); 
app.use('/styles',express.static(path.join(__dirname, 'public/stylesheets')));

/javascripts/app.js

angular.module('F1FeederApp', [ 
    'F1FeederApp.controllers' 
]);

/javascripts/controllers.js

angular.module('F1FeederApp.controllers', []). 
controller('driversController', function($scope, $http) { 
    $http({ 
    method: 'GET', 
    url: '/models/driversList.json', 
    data: {}, 
    transformResponse: function (data, headersGetter, status) { 
     //This was implemented since the REST service is returning a plain/text response 
     //and angularJS $http module can't parse the response like that. 
     return {data: data}; 
    } 
}).success(function(response){ alert('worked'); $scope.driversList = response}).error(function(response) { 
    $scope.driversList = [ 
     { 
      Driver: { 
       givenName: response, 
       familyName: 'Vettel' 
      }, 
      points: 322, 
      nationality: "German", 
      Constructors: [ 
       {name: "Red Bull"} 
      ] 
     }, 
     { 
      Driver: { 
      givenName: 'Fernando', 
       familyName: 'Alonso' 
      }, 
      points: 207, 
      nationality: "Spanish", 
      Constructors: [ 
       {name: "Ferrari"} 
      ] 
     } 
    ]; 
}) 
});

driversList.json

[ 
     { 
      Driver: { 
       givenName: 'Eldorado', 
       familyName: 'Vettel' 
      }, 
      points: 322, 
      nationality: "German", 
      Constructors: [ 
       {name: "Red Bull"} 
      ] 
     }, 
     { 
      Driver: { 
      givenName: 'Fernando', 
       familyName: 'Alonso' 
      }, 
      points: 207, 
      nationality: "Spanish", 
      Constructors: [ 
       {name: "Ferrari"} 
      ] 
     } 
    ]

的index.html

<!DOCTYPE html> 
<html> 
<head> 
    <title>F-1 Feeder</title> 
    <script src="/scripts/angular.min.js"></script> 
    <script src="/scripts/controllers.js"></script> 
    <script src="/scripts/app.js"></script> 
</head> 

<body ng-app="F1FeederApp" ng-controller="driversController"> 
    <table> 
    <thead> 
     <tr><th colspan="4">Drivers Championship Standings</th></tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="driver in driversList"> 
     <td>{{$index + 1}}</td> 
     <td> 
      {{driver.Driver.givenName}}&nbsp;{{driver.Driver.familyName}} 
     </td> 
     <td>{{driver.Constructors[0].name}}</td> 
     <td>{{driver.points}}</td> 
     </tr> 
    </tbody> 
    </table> 
</body> 
</html>

編輯：

@rattanak

要回答的第3點，是它的工作原理，如果我只是將數組變量範圍變量。錯誤（）中的部分是以前工作的部分。

我也試過點1和它似乎JSON是出現在「數據」，所以我分配到response.data和driversList現在我得到這個錯誤 -

Data: 
[{Driver:{givenName:'Eldorado',familyName:'Vettel'},points:322,nationality:"German",Constructors:[{name:"Red Bull"}]}] 

Error: [ngRepeat:dupes] http://errors.angularjs.org/1.4.7/ngRepeat/dupes?p0=driver%20in%20driversList.data&p1=string%3Ar&p2=r 
    at Error (native) 
    at http://localhost:3000/scripts/angular.min.js:6:416 
    at http://localhost:3000/scripts/angular.min.js:280:39 
    at Object.fn (http://localhost:3000/scripts/angular.min.js:129:401) 
    at n.a.$get.n.$digest (http://localhost:3000/scripts/angular.min.js:130:483) 
    at n.a.$get.n.$apply (http://localhost:3000/scripts/angular.min.js:133:512) 
    at h (http://localhost:3000/scripts/angular.min.js:87:376) 
    at K (http://localhost:3000/scripts/angular.min.js:91:499) 
    at XMLHttpRequest.z.onload (http://localhost:3000/scripts/angular.min.js:93:37)

表明有重複

來源

2015-10-14 Sachin Hegde

您的文件driverlist.json不包含有效的JSON代碼。此代碼應爲：

[ 
    { 
     "Driver": { 
      "givenName": "Eldorado", 
      "familyName": "Vettel" }, 
     "points": 322, 
     "nationality": "German", 
     "Constructors": [ 
      {"name": "Red Bull"} 
     ] 
    }, 
    { 
     "Driver": { 
     "givenName": "Fernando", 
     "familyName": "Alonso" 
     }, 
     "points": 207, 
     "nationality": "Spanish", 
     "Constructors": [ 
      {"name": "Ferrari"} 
     ] 
    } 
]

更正此錯誤，然後重試。

JSON總是用雙引號（「）從來沒有單引號（'）

有關正確的JSON的詳細信息，請參閱http://www.json.org/

來源

2015-10-14 09:16:33 Oak

謝謝！它的工作:) –

好像$ http服務沒有成功解析。沒有實際測試代碼就很難說清楚。使用Chrome開發控制檯，我將通過以下方式調試代碼：

在promise的成功函數中使用console.log($scope.driversList)。
在promise的錯誤函數中使用console.log(error)。
是你能得到的代碼，而無需使用$ http服務，即不僅僅是數據的數組變量分配給$scope.driversList工作。

我很樂意爲您測試它，如果您可以提供github鏈接或其他東西。

來源

2015-10-14 06:12:31 rattanak

使用AngularJS從json檢索數據

回答

相關問題