angularjs fetching json using http

Question

I am new to angularjs,

Here is my code:

<!DOCTYPE HTML>
<html ng-app="myapp">
<head>
<meta charset="utf-8">
<title>Angularjs project</title>
<script type="text/javascript" src="angular.min.js"></script>
<script>
var myapp=angular.module('myapp',[]);
myapp.controller('myctrl', function ($scope,$http) {
$http.get('countries.json').success(function(data){
$scope.countries=data;
});
});
</script>
<body>
<div ng-controller="myctrl">
<table>
<tr>
<th>country</th>
<th>population</th>
</tr>
<tr ng-repeat="country in coutries">
<td>{{country.name}}</td>
<td>{{country.population}}</td>
</tr>
</table>
</div>
</body>
</html>

And i have a json file, when it run, it doesn't work.

When i referred in google, they are saying server.js or install node.js something like that.

I just confused,what should i follow, can anyone guide me to fetching json data and display.

any help would be highly appreciated.

Thanks in advance.,

hi, for running ajax request you must run your application in a server, i suggest you to install a local web server like apache and run it from your local host and then ajax request to your json file will be work. and also you don't need nodejs for this case. — Ethan.R
– Ethan.R, Commented Feb 6, 2016 at 6:50
when you are using $http in angular it's try to make an ajax request whit javascript to the desired destination and get the response back to you, check this link for more information about ajax w3schools.com/Ajax/ajax_intro.asp — Ethan.R
– Ethan.R, Commented Feb 6, 2016 at 6:54
if you are running it on localhost and it doesn't work, open console window inside your browser by pressing f12 key and reload the page to send resend the request, there you can see what sending and what is going back as answer to that request, check the status code or any other type of errors — Ethan.R
– Ethan.R, Commented Feb 6, 2016 at 6:55

Mahantesh Kumbar · Accepted Answer · 2016-02-06 07:20:48Z

0

Spelling mistake

$scope.countries=data;

<tr ng-repeat="country in coutries">

change to :

<tr ng-repeat="country in countries">

answered Feb 6, 2016 at 7:20

Mahantesh Kumbar

2551 silver badge10 bronze badges

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

1 Comment

pcs Over a year ago

you made it simple.. so what about that ajax request or mimetype? thanks

Ranjith V · Accepted Answer · 2016-02-06 07:07:39Z

0

you have to include angular.js script. Can't find it in your code. Also countries.json file must be in the same level as of the above html in project structure.

answered Feb 6, 2016 at 7:07

Ranjith V

1345 bronze badges

2 Comments

Ranjith V Over a year ago

close you <head> tag

Ranjith V Over a year ago

Also there is a spelling mistake "$scope.countries=data" and "country in coutries". The spelling of countries is different. You doesn't need any extra config. It is just reading a json file.

Collectives™ on Stack Overflow

angularjs fetching json using http

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related