JSON數據添加到angularjs

我想從json文件讀取數據到angular.js，但我沒有獲取數據。JSON數據添加到angularjs

[ 
    { 
    "code": "AD", 
    "name": "Andorra", 
    "population": "84000" 
    }, 
    { 
    "code": "TN", 
    "name": "Tunisia", 
    "population": "10589025" 
    }, 
    { 
    "code": "TW", 
    "name": "Taiwan", 
    "population": "22894384" 
    }, 
    { 
    "code": "TZ", 
    "name": "Tanzania", 
    "population": "41892895" 
    }, 
    { 
    "code": "UA", 
    "name": "Ukraine", 
    "population": "45415596" 
    }, 
    { 
    "code": "UG", 
    "name": "Uganda", 
    "population": "33398682" 
    }, 
    { 
    "code": "UM", 
    "name": "U.S. Minor Outlying Islands", 
    "population": "0" 
    }, 
    { 
    "code": "US", 
    "name": "United States", 
    "population": "310232863" 
    }, 
    { 
    "code": "UY", 
    "name": "Uruguay", 
    "population": "3477000" 
    }, 
    { 
    "code": "UZ", 
    "name": "Uzbekistan", 
    "population": "27865738" 
    }, 
    { 
    "code": "VA", 
    "name": "Vatican City", 
    "population": "921" 
    }, 
    { 
    "code": "VC", 
    "name": "Saint Vincent and the Grenadines", 
    "population": "104217" 
    }, 
    { 
    "code": "VE", 
    "name": "Venezuela", 
    "population": "27223228" 
    }, 
    { 
    "code": "VG", 
    "name": "British Virgin Islands", 
    "population": "21730" 
    }, 
    { 
    "code": "VI", 
    "name": "U.S. Virgin Islands", 
    "population": "108708" 
    }, 
    { 
    "code": "VN", 
    "name": "Vietnam", 
    "population": "89571130" 
    }, 
    { 
    "code": "VU", 
    "name": "Vanuatu", 
    "population": "221552" 
    }, 
    { 
    "code": "WF", 
    "name": "Wallis and Futuna", 
    "population": "16025" 
    }, 
    { 
    "code": "WS", 
    "name": "Samoa", 
    "population": "192001" 
    }, 

    { 
    "code": "ZW", 
    "name": "Zimbabwe", 
    "population": "11651858" 
    } 
]

的index.html

<html ng-app="countryApp"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title>Angular.js JSON Fetching Example</title> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> 
 
\t <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> 
 
    <script> 
 
     var countryApp = angular.module('countryApp', []); 
 
     countryApp.controller('CountryCtrl', function ($scope, $http){ 
 
     $http.get('countries.json').success(function(data) { 
 
      $scope.countries = data; 
 
     }); 
 
     }); 
 
    </script> 
 
    </head> 
 
    <body ng-controller="CountryCtrl"> 
 
\t <h2>Angular.js JSON Fetching Example</h2> 
 
    <table> 
 
     <tr> 
 
     <th>Code</th> 
 
\t \t <th>Country</th> 
 
     <th>Population</th> 
 
     </tr> 
 
     <tr ng-repeat="country in countries"> 
 
     <td>{{country.code}}</td> 
 
\t \t <td>{{country.name}}</td> 
 
     <td>{{country.population}}</td> 
 
     </tr> 
 
    </table> 
 
    </body> 
 
</html>

來源

2016-02-01 bhatt

您是否能夠通過鍵入路徑從瀏覽器訪問countries.json文件。我的意思是相對於當前的HTML頁面。 – Bunti

控制檯出現什麼錯誤？你的json工作正常 –

@RIYAJKHAN在運行html文件到本地系統時顯示以下錯誤。 XMLHttpRequest無法加載file：///home/name/Desktop/yourkSupply/countries.json。交叉原點請求僅支持協議模式：http，data，chrome，chrome-extension，https，chrome-extension-resource。（匿名函數）@ angular.min.js：79 angular.min.js：92錯誤：無法執行'XMLHttpRequest'上的'發送'：無法加載'file：///home/name/Desktop/yourkSupply/countries.json'。 – bhatt

當你做出一個$ http.get調用，回調函數返回的響應對象。這意味着您需要訪問響應的數據屬性，而不僅僅是分配響應：

$http.get('countries.json').success(function(response) { 
    $scope.countries = response.data; 
});

看看該文檔爲$ http.get，具體的例子（$http docs）

來源

2016-02-01 05:21:17

請檢查json文件的路徑，因爲代碼很好。

如果您正在從本地機器執行代碼，則需要服務器來運行代碼，如nodejs。

來源

2016-02-01 05:41:02

嗨@勝利，感謝您的迴應，但是什麼意思的含義運行代碼像nodejs.actually我是沒有得到任何數據。 – bhatt

由於瀏覽器具有跨源HTTP請求**（CORS）**驗證，您需要在像nodejs或其他任何** HTTP **服務器中運行代碼。如果您打開開發人員工具（Chrome中的F12），您將看到以下錯誤：XMLHttpRequest無法加載因** CORS **導致的「countries.json」。 –

JSON數據添加到angularjs

回答

相關問題