Hey there, I am a new tool for angularjs.
Take a look at the json file below:
[
{
"name": "WORLD",
"population": 6916183000,
"flagurl":"C:\xampp\htdocs\selva
\Flag_of_the_People's_Republic_of_China.svg"
},
{
"name":"More developed regions",
"population": 1240935000,
"flagurl": "C:\xampp\htdocs\selva
\Flag_of_the_People's_Republic_of_China.svg"
},
{
"name": "Less developed regions",
"population": 5675249000,
"flagurl": "C:\xampp\htdocs\selva
\Flag_of_the_People's_Republic_of_China.svg"
},
{
"name": "Least developed countries",
"population": 838807000,
"flagurl": "C:\xampp\htdocs\selva
\Flag_of_the_People's_Republic_of_China.svg"
}
]
Unfortunately, when I try to run the code below, it doesn't seem to be working properly,
<script>
var myapp=angular.module('myapp',[]);
myapp.controller('myctrl', function ($scope,$http) {
$http.get('flag.json').success(function(data){
$scope.countries=data;
});
});
</script>
<body>
<div ng-controller="myctrl">
search: <input type="text" ng-model="query" />
<table>
<tr>
<th>country</th>
<th>population</th>
<th>flag</th>
</tr>
<tr ng-repeat="country in countries">
<td>{{country.name}}</td>
<td>{{country.population}}</td>
<td><img src="{{country.flagurl}}" width="100"></td>
</tr>
</table>
Interestingly, the code works fine when fetching images online.
I'm trying to figure out what mistake I have made in my coding. Any help or tips would be greatly appreciated!
Thank you,