Click here to Skip to main content
15,892,199 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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://localhost/week10/resources/dog.json** The site doesn't work. 

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
Posted
Comments
Bryian Tan 26-May-18 0:29am    
have you try add "headers: {'Content-Type': 'application/json'}
$http({
            method : "GET",
            url : "http://localhost/week10/resources/dog.json",
headers: {'Content-Type': 'application/json'}
        }).then(function mySuccess(response) {
            $scope.dogObj = response.data;
        }, function myError(response) {
            $scope.dogObj = response.statusText;
        });
Member 13845115 26-May-18 2:06am    
hey Bryian
I don't know how to implement this.
Could you direct me to the proper resources for this
Thanks!

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900