无法使用 Angular 向本地 JSON 文件发出 $http.get 请求

Question

我正在制作一个天气应用程序，我需要从我的控制器中获取本地 JSON 文件，然后对数据进行处理。但是，出于某种原因，我无法获得 local $http.get 工作请求。我该怎么办？

这是我当前的代码：

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

weatherApp.controller('weatherCtrl', function ($scope, $http) {
    $scope.cities = [],
    $scope.getCities = (function() {
        $http.get('http://localhost:81/Webb/angular projekt/jsons/cities.json')
             .success(function(data, status, headers, config) {

                 console.log(data);
             })
             .error(function(data, status, headers, config) {
                 console.log(status);
             });
    }())
}

这给了我这个错误：

SyntaxError: Unexpected token {                                         angular.js:11598
at Object.parse (native)
at oc (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:14:156)
at Yb (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:77:190)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:78:50
at s (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:7:302)
at Yc (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:78:32)
at c (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:79:165)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:112:343
at l.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:126:193)
at l.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js:123:286)

我也试过使用 jsons/cities.json 但是会抛出这个错误：

Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource.

向外部资源发出获取请求工作正常，但每当我在本地执行时，事情似乎就不起作用了。

我尝试获取的 JSON 文件如下所示：

{"cities": {

    {   
        city: "Stockholm", 
        latitud: "59", 
        longitud: "18",
        id: "sthlm"
    }, 
    {
        city: "Göteborg", 
        latitud: "58", 
        longitud: "12",
        id: "gbg"
    },
    {
        city: "Malmö", 
        latitud: "55", 
        longitud: "13",
        id: "malmo"
    },
    {
        city: "Umeå", 
        latitud: "63", 
        longitud: "20",
        id: "umea"
    }
}
}

Answer 1

尝试使用相对路径而不是绝对路径：

$http.get('jsons/cities.json')

或类似的内容，具体取决于您的文件夹结构。

编辑：Here's a Plunkr 显示它正在运行。

编辑 2：看来问题实际上是 JSON 格式错误。正确的格式是：

{
  "cities": [
    {   
        "city": "Stockholm", 
        "latitud": "59", 
        "longitud": "18",
        "id": "sthlm"
    }, 
    {
        "city": "Göteborg", 
        "latitud": "58", 
        "longitud": "12",
        "id": "gbg"
    },
    {
        "city": "Malmö", 
        "latitud": "55", 
        "longitud": "13",
        "id": "malmo"
    },
    {
        "city": "Umeå", 
        "latitud": "63", 
        "longitud": "20",
        "id": "umea"
    }
  ]
}

Answer 2

您不能对本地文件进行跨源请求。否则网站可以随意请求您计算机上的文件。

有关详细信息，请参阅 this question。建议的解决方案包括运行在您的计算机中安装一个服务器，以便您最终通过 HTTP 调用该文件。 file:// 不适合拨打 AJAX 电话 "protocol"。

Answer 3

'http://localhost:81/Webb/angular projekt/jsons/cities.json' 中有一个 space。您可以尝试消除 'angular' 和 'projekt' 之间的 space 吗？

Making a get request to an external resource works fine, but whenever I do it locally things just doesn't seem to work.

您是否将服务器的 Access-Control-Allow-Origin 响应 header 设置为匹配您请求的来源 header？将响应 header 设置为原始请求 header 有效。

另外，您如何访问 Angular 页面？

Answer 4

在您的 local 文件中，您遇到 JSON 解析异常，因为您的 JSON 格式严重错误。试试这个格式：

{
    "cities": [
        {
            "city": "Stockholm",
            "latitud": "59",
            "longitud": "18",
            "id": "sthlm"
        }
    ]
}

Answer 5

我使用 $http.get('../jsons/cities.json') 之类的相对路径，但没有用。直到我像这样

在 web.config 中添加对 .json 文件的支持

<staticContent>
        <mimeMap fileExtension=".json" mimeType="application/json" />
      </staticContent>

Answer 6

假定这将是静态数据。定义一个对象并将其作为脚本引用。

Include reference into index.html (or whatever)

<script src="../jsons/citiesJSON.js"></script>

create an object and pump in the data

var GLOBALDATA = {};
GLOBALDATA.citiesJSON =
{"cities": {
{   
    city: "Stockholm", 
    latitud: "59", 
    longitud: "18",
    id: "sthlm"
}, 
{
    city: "Göteborg", 
    latitud: "58", 
    longitud: "12",
    id: "gbg"
},
{
    city: "Malmö", 
    latitud: "55", 
    longitud: "13",
    id: "malmo"
},
{
    city: "Umeå", 
    latitud: "63", 
    longitud: "20",
    id: "umea"
    }
}
} ; // <-- it's a statement now

no need to request the data via HTTP

$scope.cities = GLOBALDATA.citiesJson;

无法使用 Angular 向本地 JSON 文件发出 $http.get 请求

Unable to make a $http.get request to a local JSON file using Angular

javascript

json

http

angularjs