Error, status 404 in Ionic and Angular

ionic-v1
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.

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

image
image1366×714 107 KB

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.

image
mycode-print-2.jpg1366×633 75.5 KB

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.
image

It worked perfectly

I hope, never commit this mistake again!

10

I’m glad this helped you!