無法使用Angular對本地JSON文件發出$ http.get請求

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

您無法對本地文件執行跨源請求。 否則，網站可以隨意請求您的計算機上的文件。

有關更多信息，請參閱此問題 。 建議的解決方案包括在您的計算機中運行服務器，以便最終通過HTTP調用該文件。 file://只是用於進行AJAX調用的可接受的“協議” 。

Answer 3

嘗試使用相對路徑而不是絕對路徑：

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

或者根據您的文件夾結構，沿着這些線。

編輯： 這是一個顯示它工作的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

' http：// localhost：81 / Webb / angular projekt / jsons / cities.json'中有空格。 你能嘗試消除'angular'和'projekt'之間的空間嗎？

向外部資源發出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（'../ jsons / cities.json'），但沒有用。 直到我在web.config中添加對.json文件的支持

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