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

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

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

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

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

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

Drivers Championship Standings
1

Я предполагаю, что ответ в основном пустой и, следовательно, "1", но не понимаю, почему это происходит.

Ниже мои файлы -

/ приложение.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 / контроллеры.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"}
          ]
      }
    ];
})  
});

Список водителей.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"}
          ]
      }
    ]

Индекс.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, Да, это работает, если я просто назначаю переменную массива переменной области. Часть в ошибке () - это та, которая работала ранее.

Я также попробовал пункт 1, и, похоже, json присутствует в "данных", поэтому я назначил ответ.данные в 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)

Указание на наличие дубликатов

2 2
node.js angularjs json angularjs-ng-repeat getjson

2 ответа:

Список драйверов файлов.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/

0

Похоже, что служба $ http не решает проблему успешно. Трудно сказать, не проверив код на самом деле. С помощью консоли разработчика Chrome, я бы отлаживать код:

  1. Используйте console.log($scope.driversList) в функции успеха обещания.

  2. Используйте console.log(error) в функции ошибки обещания.

  3. Удалось ли вам заставить код работать без использования сервиса $http, а именно просто назначить переменную массива данных $scope.driversList.

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

0