What is wrong in angularjs controller

Question

I have to add list as a category this is not working properly. I added PlaylistsCtrl.js, playlists.html file and my php json file below this question.

PlaylistsCtrl.js

.controller('PlaylistsCtrl', function($scope,$http) {

var vm = this;

vm.playlists = {};

$http.get("http://localhost/youtubewebservice/shop-categorylist-product.php") .success(function(response) {

     vm.playlists = response.records;
});   
})

playlists.html

<ion-view view-title="playlists">
<ion-content>
<ion-list>
  <ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">
    {{playlist.name}}
  </ion-item>
</ion-list>
 </ion-content>
</ion-view>

shop-categorylist-product.php

{
"category": [{
    "term_id": "10",
    "name": "Arden Grange",
    "slug": "arden-grange",
    "products": [{
        "ID": "47",
        "post_title": "Arden Grange, Premium",
        "post_date": "2015-10-20 16:13:04",
        "post_author": "5"
    }, {
        "ID": "50",
        "post_title": "Arden Grange Puppy\/Junior Large Breed",
        "post_date": "2015-10-21 04:56:23",
        "post_author": "5"
    }, {
        "ID": "53",
        "post_title": "Arden Grange Weaning\/Puppy",
        "post_date": "2015-10-22 12:52:35",
        "post_author": "5"
    }]
}, {
    "term_id": "12",
    "name": "Jewellery",
    "slug": "jewellery",
    "products": [{
        "ID": "59",
        "post_title": "Sterling silver Amethyst studs",
        "post_date": "2015-11-30 09:37:05",
        "post_author": "8"
    }, {
        "ID": "105",
        "post_title": "London Blue topaz 7 carat AAA quality",
        "post_date": "2015-12-01 05:09:32",
        "post_author": "8"
    }, {
        "ID": "134",
        "post_title": "7 Carat Natural Purple Amethyst AAA quality",
        "post_date": "2015-12-01 05:09:31",
        "post_author": "8"
    }, {
        "ID": "136",
        "post_title": "10 carat natural Smoky Quartz AAA quality",
        "post_date": "2015-12-01 05:09:31",
        "post_author": "8"
    }]
}]
}

Change the position of vm.playlists = {}; inside $http request. — Varit J Patel
– Varit J Patel, Commented Jul 14, 2016 at 6:24
<ng-controller="PlaylistsCtrl as plist"> ion-item ng-repeat="playlist in plist.playlists" href="#/app/playlists/{{playlist.id}}"> — rejo
– rejo, Commented Jul 14, 2016 at 6:25

developer033 · Accepted Answer · 2016-07-14 06:57:51Z

1

Since you're using controller-as-syntax, you, of course, must use the as syntax in your view, as below:

Change the code your controller to:

angular.module('app', [])
  .controller('PlaylistsCtrl', function($scope, $http) {
    var vm = this;

    vm.playlists = {};

    $http.get("http://localhost/youtubewebservice/shop-categorylist-product.php").then(function(response) {
      vm.playlists = response.data.category;
    });
  });

And in your view:

<html ng-app="app">

<head>
  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script> -->
  <link href="https://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
  <script src="https://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="PlaylistsCtrl as playCtrl">

  <ion-pane>
    <ion-header-bar class="bar-stable">
      <h1 class="title">Awesome App</h1>
    </ion-header-bar>
    <ion-content class="padding">
      <ion-item ng-repeat="playlist in playCtrl.playlists" href="#/app/playlists/{{playlist.id}}">
        {{playlist.name}}
      </ion-item>
    </ion-content>
  </ion-pane>
</body>

</html>

Complete DEMO

I hope it helps!

edited Jul 14, 2016 at 6:57

answered Jul 14, 2016 at 6:31

developer033

25k8 gold badges85 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

developer033 Over a year ago

Post your complete view then.

moni123 Over a year ago

can u give me answer for this question. If u can better my friend... stackoverflow.com/questions/37107684/…

moni123 Over a year ago

This is working but, I need worked on the playlist.html file my friend. no need to write any code on the index.html page my friend

moni123 Over a year ago

Now, I need get another details for the another page. can u help me my fiend.

rejo · Accepted Answer · 2016-07-14 06:41:31Z

1

Check this , it working http://play.ionic.io/app/cad0085554e6

HTML

 <body ng-app="app" ng-controller="PlaylistsCtrl as plist">

    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Awesome App</h1>
      </ion-header-bar>
      <ion-content class="padding">
       <ion-item ng-repeat="playlist in plist.playlists" href="#/app/playlists/{{playlist.id}}">
    {{playlist.name}}
  </ion-item>
      </ion-content>
    </ion-pane>
  </body>

javascript

angular.module('app', ['ionic'])

.controller('PlaylistsCtrl', function($scope,$http) {

var vm = this;

vm.playlists = {};

var response = {
"category": [{
    "term_id": "10",
    "name": "Arden Grange",
    "slug": "arden-grange",
    "products": [{
        "ID": "47",
        "post_title": "Arden Grange, Premium",
        "post_date": "2015-10-20 16:13:04",
        "post_author": "5"
    }, {
        "ID": "50",
        "post_title": "Arden Grange Puppy\/Junior Large Breed",
        "post_date": "2015-10-21 04:56:23",
        "post_author": "5"
    }, {
        "ID": "53",
        "post_title": "Arden Grange Weaning\/Puppy",
        "post_date": "2015-10-22 12:52:35",
        "post_author": "5"
    }]
}, {
    "term_id": "12",
    "name": "Jewellery",
    "slug": "jewellery",
    "products": [{
        "ID": "59",
        "post_title": "Sterling silver Amethyst studs",
        "post_date": "2015-11-30 09:37:05",
        "post_author": "8"
    }, {
        "ID": "105",
        "post_title": "London Blue topaz 7 carat AAA quality",
        "post_date": "2015-12-01 05:09:32",
        "post_author": "8"
    }, {
        "ID": "134",
        "post_title": "7 Carat Natural Purple Amethyst AAA quality",
        "post_date": "2015-12-01 05:09:31",
        "post_author": "8"
    }, {
        "ID": "136",
        "post_title": "10 carat natural Smoky Quartz AAA quality",
        "post_date": "2015-12-01 05:09:31",
        "post_author": "8"
    }]
}]
};
     vm.playlists = response.category; 


});

answered Jul 14, 2016 at 6:41

rejo

3,3405 gold badges29 silver badges35 bronze badges

2 Comments

moni123 Over a year ago

I need get json data using URL my friend. not hard code json data my friend.

rejo Over a year ago

We are not getting json data from your localhost so it hard coded, Provide valid url to get json.

Arif · Accepted Answer · 2016-07-14 06:58:44Z

1

here is working example

i guess your problem was

<ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">
    {{playlist.name}}
  </ion-item>

you use ng-repeat on playlists which is not an array. you should repeat playlists.category or make playlists to return an array

edited Jul 14, 2016 at 6:58

answered Jul 14, 2016 at 6:29

Arif

1,6419 silver badges18 bronze badges

3 Comments

Arif Over a year ago

Is working fine for me. how do you want to see the result ? you want ion-item of category or products ?

Arif Over a year ago

Check the Codepen again. I've edited it so it will display Category -> products as nested ion-item

Arif Over a year ago

I've attached the screenshot of the result. Is this what you wanted to display ?

Mohan Gopi · Accepted Answer · 2016-07-14 06:37:54Z

0

in your controller push the name only into a seperate object and then try to use ng-repeat as i used below

controller

.controller('PlaylistsCtrl', function($scope,$http) {

$scope.playlists = [];

$http.get("http://localhost/youtubewebservice/shop-categorylist-product.php") .success(function(response) {

     $scope.playlist = response.category;

       $scope.playlist.forEach(function(item){
                $scope.playlist.push(item.name);
                console.log(item.name);
            })
});   
})

inside your view

<ion-view view-title="playlists">
<ion-content>
<ion-list ng-repeat="play in playlists">
  <ion-item >
    {{play}}
  </ion-item>
</ion-list>
 </ion-content>
</ion-view>

answered Jul 14, 2016 at 6:37

Mohan Gopi

7,74618 gold badges70 silver badges119 bronze badges

6 Comments

Mohan Gopi Over a year ago

you have used ng-repeat in item it should be in list

moni123 Over a year ago

List will show in the console. but, not working on the view my friend.

Mohan Gopi Over a year ago

haha no dude you see on the playlists array i have pushed the name of your response to that array so that array contain only name and then i have used that array in ng-repeat in list

moni123 Over a year ago

what i need to do work on view my friend. I tried {{play.name}} but not working

Mohan Gopi Over a year ago

look my answer i have not used play.name i used play only because in the $scope.playlists array we have the name

|

Collectives™ on Stack Overflow

What is wrong in angularjs controller

4 Answers 4

4 Comments

2 Comments

3 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

2 Comments

3 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related