Извлечение данных из json с помощью AngularJS

Я изучаю угловые js с нуля и в настоящее время пытаюсь извлечь данные из json-файла.Извлечение данных из json с помощью AngularJS

Я использую - nodejs, express, AngularJS.

Раньше я получаю сообщение об ошибке "Неожиданный маркер D" на использовании -

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

который получил решить, но теперь я получаю что-то вроде этого с текущим кодом -

Drivers Championship Standings 
1

I «Предполагая, что ответ в основном пустой, а значит,« 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>

EDIT:

@rattanak

Чтобы ответить на этот пункт 3, да это работает, если я просто присвоить переменную массива в переменная области видимости. Часть в error() является той, которая работала ранее.

Я также попытался точка 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 Dev Console я бы отлаживал код:

Использовать console.log($scope.driversList) в функции успеха обещания.
Использовать console.log(error) в функции ошибки обещания.
Вы могли бы заставить код работать без использования службы $ http, а именно просто назначить переменную массива данных $scope.driversList.

Я счастлив проверить его для вас, если вы можете предоставить ссылку github или что-то еще.

источник

2015-10-14 06:12:31 rattanak

Извлечение данных из json с помощью AngularJS

ответ

Смежные вопросы