无法使用 Angular http 服务读取我的 json 文件

Question

当我尝试使用 http 服务从 json 文件中读取我的 json 数据时，我有我的 json 数据，但当我把它放在一个 scrope 直接变量中时它不起作用。

我尝试使用此代码读取我的 json 文件：

app.controller('myCtrl',['$scope', '$http', function($scope, $http){

//    WE USE SCOPE variable TO PASS THINGS FROM THE JAVASCRIPT AND VISE VERSA

//    ITS LIKE AN OBJECT 

//    GET FOR ME THE DATa FROM THIS FILE CALLED data.json AND THEN ITS SUCESS HA SO DO A FUNCTION GET THE DATA 
 $http.get('data.json').success(function(data){ 
//     GRAB THE DATA AND PUT IT IN THAT VARIABLE 
     var vm = this;
    vm.data = data;



 });  
}]);

但是当我像这样使用它时，它可以完美地工作：

app.controller('myCtrl', ['$scope',
  function($scope) {
    var vm = this;

    vm.data = [{ 
     errors:
   [ { type: 'ActionView::Temp',

       message: 'No route matches {:action=>"edit", :controller=>"cars", :id=>nil} missing required keys: [:id]',
       backtrace: [Object] },
     { type: 'ActionController::UrlGenerationError',

       message: 'No route matches {:action=>"edit", :controller=>"cars", :id=>nil} missing required keys: [:id]',
       backtrace: [Object] } ],
  context:

   {
       rootDirectory: '/app',
     environment: 'production',
     hostname: 'af71d84',
     time: '2016-10-20 08:41:04 aaaaaaaaaaaC',
     os: 'x86_64-linux',
     language: 'ruby/2.3.0',
     notifier:
      { name: 'airbrake-ruby',
        version: '1.6.0',
        url: 'https://github.com/airbrake/airbrake-ruby' },
     url: 'https://carzar.herokuapp.com/cars/58079b9e918120003d678ef/quotes/580759cae918120003d678f0',
     userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36',
     version: 'Rails/5.0.0.1',
     component: 'quotes',
     action: 'show' },
  environment:

   {
       httpMethod: 'GET',
     referer: null,
     headers:
      { HTTP_VERSION: 'HTTP/1.1',
        HTTP_HOST: 'carzar.herokuapp.com',
        HTTP_CONNECTION: 'close',
        HTTP_UPGRADE_INSECURE_REQUESTS: '1',
        HTTP_USER_AGENT: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36',
        HTTP_ACCEPT: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8',
        HTTP_ACCEPT_ENCODING: 'gzip, deflate, sdch, br',
        HTTP_ACCEPT_LANGUAGE: 'en-US,en;q=0.8',
        HTTP_COOKIE: '_hjIncludedInSample=1; _ga=GA1.3.1023727724.1471250148; _website_session=Uzl4cVdsbzk4dEkxK0E5VFJxdWhHQmNJQVpHenNCdThuYkRFUERPNFhJNktzVHpKMlM0NzJlSEZFQmFGTUFwTXFLMDFySVh0Tnl1MjhEZzBrcUF0YTJmdXVzUE1ac3ltNG0ySDkxNlpIN2J2SDNQdmJYL0ZFS2Y3U1N0SEdOZTB1NnNOZGlrVm95SHdZSy93cGtCYW5nPT0tLW9zSERCSWgyNGdiMGw5VnZ0eTExR2c9PQ%3D%3D--0eecd3ec3784b2e82c65a09c677eac1c1482bfda',
        HTTP_X_REQUEST_ID: '',
        HTTP_X_FORWARDED_FOR: '196.22.246.146',
        HTTP_X_FORWARDED_PROTO: 'https',
        HTTP_X_FORWARDED_PORT: '443',
        HTTP_VIA: '1.1 vegur',
        HTTP_CONNECT_TIME: '0',
        HTTP_X_REQUEST_START: '1476952864670',
        HTTP_TOTAL_ROUTE_TIME: '0' } },
  session:
   { 
       session_id: '29e60f46d03a58702d3aada65c860482',
     _csrf_token: 'uF90eNX/nyVS72rEgM9ZNmGOJj4ad7gb35SKM941egs=' },
  params:

   { controller: 'quotes',
     action: 'show',
     car_id: '58079b9e918120003d678ef',
     id: '580759cae918120003d678f0',
     time: '2016-10-20T08:41:05.111Z' },
        name: "first",
        thingy: 1
},
               { 
     errors:
   [ { type: 'ActionView::Template::Error',

       message: 'No route matches {:action=>"edit", :controller=>"cars", :id=>nil} missing required keys: [:id]',
       backtrace: [Object] },
     { type: 'ActionController::UrlGenerationError',

       message: 'No route matches {:action=>"edit", :controller=>"cars", :id=>nil} missing required keys: [:id]',
       backtrace: [Object] } ],
  context:

   {
       rootDirectory: '/app',
     environment: 'production',
     hostname: 'af71d84a-f06d-4d29-8197-600f5c1ebffa',
     time: '2016-10-20 08:41:04 UTC',
     os: 'x86_64-linux',
     language: 'ruby/2.3.0',
     notifier:
      { name: 'airbrake-ruby',
        version: '1.6.0',
        url: 'https://github.com/airbrake/airbrake-ruby' },
     url: 'https://carzar.herokuapp.com/cars/58079b9e918120003d678ef/quotes/580759cae918120003d678f0',
     userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36',
     version: 'Rails/5.0.0.1',
     component: 'quotes',
     action: 'show' },
  environment:

   {
       httpMethod: 'GET',
     referer: null,
     headers:
      { HTTP_VERSION: 'HTTP/1.1',
        HTTP_HOST: 'carzar.herokuapp.com',
        HTTP_CONNECTION: 'close',
        HTTP_UPGRADE_INSECURE_REQUESTS: '1',
        HTTP_USER_AGENT: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36',
        HTTP_ACCEPT: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8',
        HTTP_ACCEPT_ENCODING: 'gzip, deflate, sdch, br',
        HTTP_ACCEPT_LANGUAGE: 'en-US,en;q=0.8',
        HTTP_COOKIE: '_hjIncludedInSample=1; _ga=GA1.3.1023727724.1471250148; _website_session=Uzl4cVdsbzk4dEkxK0E5VFJxdWhHQmNJQVpHenNCdThuYkRFUERPNFhJNktzVHpKMlM0NzJlSEZFQmFGTUFwTXFLMDFySVh0F0YTJmdXVzUE1ac3ltNG0ySDkxNlpIN2J2SDNQdmJYL0ZFS2Y3U1N0SEdOZTB1NnNOZGlrVm95SHdZSy93cGtCYW5nPT0tLW9zSERCSWgyNGdiMGw5VnZ0eTExR2c9PQ%3D%3D--0eecd3ec3784b2e82c65a09c677eac1c1482bfda',
        HTTP_X_REQUEST_ID: 'c270acca-988f-4f14--2ce4c8abacce',
        HTTP_X_FORWARDED_FOR: '196.22.246.146',
        HTTP_X_FORWARDED_PROTO: 'https',
        HTTP_X_FORWARDED_PORT: '443',
        HTTP_VIA: '1.1 vegur',
        HTTP_CONNECT_TIME: '0',
        HTTP_X_REQUEST_START: '1476952864670',
        HTTP_TOTAL_ROUTE_TIME: '0' } },
  session:
   { 
       session_id: '29e60f46d03a58702d3aada65c860482',
     _csrf_token: 'uF90eNX/nyVS72rEgM9ZNmGOJj4ad7gb35SKM941egs=' },
  params:

   { controller: 'quotes',
     action: 'show',
     car_id: '58079b9e918120003d678ef',
     id: '',
     time: '2016-10-20T08:41:05.111Z' },
        name: "second",
        thingy: 2
}

               ,{ 
     errors:
   [ { type: 'ActionView::Template::Error',

       message: 'No route matches {:action=>"edit", :controller=>"cars", :id=>nil} missing required keys: [:id]',
       backtrace: [Object] },
     { type: 'ActionController::UrlGenerationError',

       message: 'No route matches {:action=>"edit", :controller=>"cars", :id=>nil} missing required keys: [:id]',
       backtrace: [Object] } ],
  context:

   {
       rootDirectory: '/app',
     environment: 'production',
     hostname: 'af71d84a-f06d-4d29-8197-600f5c1ebffa',
     time: '2016-10-20 08:41:04 UTC',
     os: 'x86_64-linux',
     language: 'ruby/2.3.0',
     notifier:
      { name: 'airbrake-ruby',
        version: '1.6.0',
        url: 'https://github.com/airbrake/airbrake-ruby' },
     url: 'https://carzar.herokuapp.com/cars/58079b9e918120003d678ef/quotes/580759cae918120003d678f0',
     userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36',
     version: 'Rails/5.0.0.1',
     component: 'quotes',
     action: 'show' },
  environment:

   {
       httpMethod: 'GET',
     referer: null,
     headers:
      { HTTP_VERSION: 'HTTP/1.1',
        HTTP_HOST: 'carzar.herokuapp.com',
        HTTP_CONNECTION: 'close',
        HTTP_UPGRADE_INSECURE_REQUESTS: '1',
        HTTP_USER_AGENT: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36',
        HTTP_ACCEPT: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8',
        HTTP_ACCEPT_ENCODING: 'gzip, deflate, sdch, br',
        HTTP_ACCEPT_LANGUAGE: 'en-US,en;q=0.8',
        HTTP_COOKIE: '_hjIncludedInSample=1; _ga=GA1.3.1023727724.1471250148; _website_session=Uzl4cVdsbzk4dEkxK0E5VFJxdWhHQmNJQVpHenNCdThuYkRFUERPNFhJNktzVHpKMlM0NzJlSEZFQmFGTUFwTXFLMDFySVh0Tnl1MjhEZzBrcUF0YTJmdXVzUE1ac3ltNG0ySDkxNlpIN2J2SDNQdmJYL0ZFS2Y3U1N0SEdOZTB1NnNOZGlrVm95SHdZSy93cGtCYW5nPT0tLW9zSERCSWgyNGdiMGw5VnZ0eTExR2c9PQ%3D%3D--0eecd3ec3784b2e82c65a09c677eac1c1482bfda',
        HTTP_X_REQUEST_ID: 'c270acca-988f-4f14-86a9-2ce4c8abacce',
        HTTP_X_FORWARDED_FOR: '196.22.246.146',
        HTTP_X_FORWARDED_PROTO: 'https',
        HTTP_X_FORWARDED_PORT: '443',
        HTTP_VIA: '1.1 vegur',
        HTTP_CONNECT_TIME: '0',
        HTTP_X_REQUEST_START: '1476952864670',
        HTTP_TOTAL_ROUTE_TIME: '0' } },
  session:
   { 
       session_id: '29e60f46d03a58702d3aada65c860482',
     _csrf_token: 'uF90eNX/nyVS72rEgM9ZNmGOJj4ad7gb35SKM941egs=' },
  params:

   { controller: 'quotes',
     action: 'show',
     car_id: '58079b9e918120003d678ef',
     id: '580759cae918120003d678f0',
     time: '2016-10-20T08:41:05.111Z' },
        name: "third",
        thingy: 3
}

    ];






  }
]);

如何使用 http 服务读取我的 json 文件数据

Answer 1

在您的http.get 调用中，this 上下文与控制器的this 不同。删除$http.get 内部的var vm = this 并将其保留在控制器函数的顶部。

将您的请求更改为指向

// Keep your reference to vm outside of the $http.get
var vm = this;
$http.get('data.json')
    .then(function (response) {
        // note that response here contains entire response. So if you want data only, you'll need to call response.data
        vm.data = response.data;
    });