Question

我正在制作天气应用程序，我需要从我的控制器中获取本地JSON文件，然后对数据进行处理。但是，由于某种原因，我无法获得本地 $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.

向外部资源发出get请求可以正常工作，但每当我在本地执行此操作时，事情似乎都无法正常工作。

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

在本地文件中，您获得了JSON解析异常，因为您的JSON严重格式错误。请尝试使用此格式：

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

Answer 2

您无法对本地文件执行跨源请求。否则，网站可以随意在您的计算机上请求文件。

有关详细信息，请参阅this question。建议的解决方案包括在您的计算机中运行服务器，以便最终通过HTTP调用该文件。 file://只是用于进行AJAX调用的“协议”。

Answer 3

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

$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 4

＆＃39; http://localhost:81/Webb/angular projekt / jsons / cities.json＆＃39;里面有个空间。你可以尝试消除“角”之间的空间吗？和＆＃39; projekt＆＃39;？

向外部资源发出get请求可以正常工作，但每当我在本地执行此操作时，事情似乎都无法正常工作。

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

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

Answer 5

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

包含对index.html（或其他）的引用

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

创建一个对象并在数据中输入

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

无需通过HTTP
请求数据

$scope.cities = GLOBALDATA.citiesJson;

Answer 6

我使用相对路径，如$ http.get（＆＃39; ../ jsons / cities.json＆＃39;），但没有用。直到我在web.config中添加对.json文件的支持，如此

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

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

6 个答案: