Hey I'm trying to use $http get function from angular to retrieve a json file from server located at **"http://localhost/week10/resources/dog.json"**
But I can't seem to access the file. The code works fine when I use the file in the local destination.
My code looks like this
This is the angular file responsible for getting data
app.controller('myCtrl', function($scope, $http) {
$http({
method : "GET",
url : "http://localhost/week10/resources/dog.json"
}).then(function mySuccess(response) {
$scope.dogObj = response.data;
}, function myError(response) {
$scope.dogObj = response.statusText;
});
});
The code for displaying these characters
<ul class="row">
<li class="col-lg-4" ng-repeat="x in dogObj">
<div class="thumbnail">
<a href="view/view2/{{x.actual_name}}"> <img src="{{x.src}}" ></a>
</div>
</li>
</ul>
And the json looks like this
[{"actual_name":"dog1.htm","shown_name":"dog1","src":"images/dog1.jpg"},
{"actual_name":"dog2.htm","shown_name":"dog2","src":"images/dog2.jpg"},
{"actual_name":"dog3.htm","shown_name":"dog3","src":"images/dog3.jpg"},
{"actual_name":"dog7.htm","shown_name":"dog7","src":"images/dog7.jpg"},
{"actual_name":"dog4.htm","shown_name":"dog4","src":"images/dog4.jpg"},
{"actual_name":"dog5.htm","shown_name":"dog5","src":"images/dog5.jpg"},
{"actual_name":"dog6.htm","shown_name":"dog6","src":"images/dog6.jpg"},
{"actual_name":"dog8.htm","shown_name":"dog8","src":"images/dog8.jpg"}]
The code works file when I change the
**url:dog.json** as there is a dog file in a local destination as well
but when I change it to **http:
If I simply put the file into the browser the json file shows up.
The browser inspect console shows xml parsing error.
What I have tried:
I had cross origin error I added header file into the apache config file,
This cleared the cross origin error on firefox but still comes up on chrome