Error, status 404 in Ionic and Angular


#1

I’m new, and starting to code one application using Ionic, but i have a kind of issue or error.

   //Mycode
    .controller('ListController', ['$scope', '$http', function($scope, $http) {
       $http.get('js/data.json').success( function(data){
       $scope.artists = data;
  });
}]);

and I have this error

http://localhost:8100/img/%7B%7Bitem.shortname%7D%7D_tn.jpg Failed to load resource: the server responded with a status of 404 (Not Found)

what kind of error is this?
I’m running my application only in the Ionic serve but my angular code have generated this issue.


Cannot resolve image path [SOLVED]
#2

Hi @fagworio,

This means that somewhere in your template files you’re accessing the file:

http://localhost:8100/img/%7B%7Bitem.shortname%7D%7D_tn.jpg

which basically translates to:

http://localhost:8100/img/{{item.shortname}}_tn.jpg

Which again means that somewhere in the templates you used angular binding (those curly braces), but that they aren’t evaluating to what you would expect. Mainly, I think because you don’t have defined item anywhere on the $scope. Try to change item with artists, but for a better help we would need to see also your template files (HTML).


#3

Thanks
This is my template code

<body ng-app="starter">

<ion-pane>
  <ion-header-bar class="bar-dark">
    <h1 class="title">Lista de Artistas</h1>
     </ion-header-bar>
    <div class="bar bar-subheader item-input-inset bar-light">
      <label class="item-input-wrapper">
        <i class="icon ion-search placeholder-icon"></i>
        <input type="search" placeholder="Buscar">
      </label>

    </div>
 
  <ion-content ng-controller='ListController' 
   class="has-subheader">
  <ion-list>
    <ion-item ng-repeat='item in artists'
     class="item-thumbnail-left item-text-wrap">
        <img src="img/{{item.shortname}}_tn.jpg" alt="{{item.name}} Photo">
        <h2>{{item.name}}</h2>
        <h3>{{item.reknown}}</h3>
        <p>{{item.bio}}.</p>
    </ion-item>
  </ion-list>
  </ion-content>
</ion-pane>

#4

Ah, right I think I know what’s the problem. Please try to use ng-src instead of src, and tell me what do you get. Btw, do other items show up correctly?


#5

The console error disappear but still the same problem.
dont show any data

look my printscreen


#6

OK, this means that the problem is in ListController with how you fetch the data from the API. So, in order to help any further I would need to see the code in the ListController. Also, you can check and see what you get as a response from the API which you’re calling.

edit:

Ah, I see you added in the first post this:

//Mycode
.controller(‘ListController’, [’$scope’, ‘$http’, function($scope, $http) {
$http.get(‘js/data.json’).success( function(data){
$scope.artists = data;
});

Now, add the console.log(data) inside the ListController and copy the output which you get here.


#7

So, when i use the console.log(data) in my controller show me a object array

Object {calendar: Array[4], artists: Array[9]}

The object array show me the data inside my data.json file.


#8

And, finally, we come to the root of the problem. You’re setting the

$scope.artists = data;

in a wrong way.

See, your service returns an object, which again has in it two objects: artists and calendar.

Thus, to make this work, just use this:

$scope.artists = data.artists;

where you’re basically accessing the artists object inside your object which you got from the $http.get call.

This should definitely be “it” now, and all should work for you.


#9

Awesome, man.
You are the one, Lol
Thanks!!
Thanks for your help.

It worked perfectly

I hope, never commit this mistake again!


#10

I’m glad this helped you!