Fatching JSON data into angularjs

Question

I am trying to read data from json file into angular.js but i am not getting data.

[
  {
    "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">
	<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">
	<h2>Angular.js JSON Fetching Example</h2>
    <table>
      <tr>
        <th>Code</th>
		<th>Country</th>
        <th>Population</th>
      </tr>
      <tr ng-repeat="country in countries">
        <td>{{country.code}}</td>
		<td>{{country.name}}</td>
        <td>{{country.population}}</td>
      </tr>
    </table>
  </body>
</html>

Are you able to access countries.json file from the browser by typing the path. I mean relative to current HTML page. — Bunti
– Bunti, Commented Feb 1, 2016 at 5:14
what error are ou getting in console?Your json is working fine — RIYAJ KHAN
– RIYAJ KHAN, Commented Feb 1, 2016 at 5:18
@RIYAJKHAN its showing following error while running html file into local system. XMLHttpRequest cannot load file:///home/name/Desktop/yourkSupply/countries.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.(anonymous function) @ angular.min.js:79 angular.min.js:92 Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///home/name/Desktop/yourkSupply/countries.json'. — bhatt
– bhatt, Commented Feb 1, 2016 at 7:00
friend file:///home/name/Desktop/yourkSupply/countries.json. this is not righr file path.Please check it is on your lcoalhost.Why there is need of such path.Please check it — RIYAJ KHAN
– RIYAJ KHAN, Commented Feb 1, 2016 at 7:03

paul trone · Accepted Answer · 2016-02-01 05:21:17Z

2

when you make an $http.get call, the callback function returns the response object. This means that you need to access the data property of the response, not just assign the response:

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

take a look at the docs for $http.get, specifically the example ($http docs)

answered Feb 1, 2016 at 5:21

paul trone

7025 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Victor Godoy · Accepted Answer · 2016-02-01 05:41:02Z

0

Please check the path of the json file because the code it's fine.

If you are executing the code from your local machine you need a server to run the code like nodejs.

answered Feb 1, 2016 at 5:41

Victor Godoy

1,69216 silver badges19 bronze badges

2 Comments

bhatt Over a year ago

Hi @victory,thanks for your response but what the meaning of meaning run the code like nodejs.actually i am not getting any data.

Victor Godoy Over a year ago

You need to run the code in a HTTP server like nodejs or any other, because of the cross-origin HTTP request (CORS) validation that browsers have. If you open the developers tools (F12 in chrome) you will see this error : XMLHttpRequest cannot load "countries.json" that's because of the CORS.

Collectives™ on Stack Overflow

Fatching JSON data into angularjs

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related