how to fetch Data from API using Angular js

Question

I am working on a project where I need to fetch data from API and display it on HTML page using Angularjs

API is returning me the Categories details. Here is my API

http://naazexpress.com/category.php

this is my angularjs Code

    var app =   angular.module('appControllers', [])
app.controller('ProductCtrl', function($scope, srvShareData,$http) {
 // alert('product Controller');
  $http.get("http://naazexpress.com/category.php")
    .then(function (response) {
      $scope.data  = response.data.children;
       console.log(response);
     });
    console.log('aa');
   // alert($scope.data);
  $scope.sharedData = srvShareData.getData();
  console.log($scope.sharedData);
});


app.service('srvShareData', function($window) {
        var KEY = 'App.SelectedValue';
       // alert('ssss');

        var addData = function(newObj) {
            var mydata = $window.sessionStorage.getItem(KEY);
            console.log(mydata);
            if (mydata) {
                mydata = JSON.parse(mydata);
            } else {
                mydata = [];
            }
            mydata = newObj;
            console.log(mydata);
           // mydata.push(newObj);
            $window.sessionStorage.setItem(KEY, JSON.stringify(mydata));
        };

        var getData = function(){
            var mydata = $window.sessionStorage.getItem(KEY);
            if (mydata) {
                mydata = JSON.parse(mydata);
            }
            return mydata || [];
        };

        return {
            addData: addData,
            getData: getData
        };
    });

and I am implementing it in my HTML page

here is my HTML page

<div id="login-page" class="row" ng-app="starter">
<div class="col s12 z-depth-6 card-panel">
  <form class="login-form" id="login">
    <div class="row">
      <div class="input-field col s12 center">
        <img src="http://naazexpress.com/skin/frontend/default/jm_casual/images/logo.png" alt="" class="responsive-img valign profile-image-login">
        <p class="center login-form-text">Seller - NaazExpress</p>
      </div>
    </div>
    <div class="input-field col s12 m6" ng-controller="ProductCtrl">
    <ul  ng-repeat="item in data">
      <li>{{item.name}}</li>
    </ul></div>
</div></div>

when i run this program the API is not returning anything. is there any issue in the code ? please help

Answer 1

Try This.

  $http.get("http://naazexpress.com/category.php")
    .then(function (response) {
      $scope.data  = response.data.children;
       console.log(response.data);
     });

Answer 2

Your response doesn't have property "children"

Here is the response, it has property "category" and then this "category" has "children"

{"category":{"category_id":"1","parent_id":"0","name":"Root Catalog","is_active":null,"position":"0","level":"0","children":[{"category_id":"2","parent_id":"1","name":"Default Category","is_active":"1","position":"1","level":"1","children":[{"category_id":"3","parent_id":"2","name":"New arrivals","is_active":"1","position":"1","level":"2","children":[{"category_id":"10","parent_id":"3","name":"New","is_active":"1","position":"2","level":"3","children":[]},{"category_id":"11","parent_id":"3","name":"Tops","is_active":"1","position":"3","level":"3","children":[]},{"category_id":"12","parent_id":"3","name":"Bottoms","is_active":"1","position":"4","level":"3","children":[]},{"category_id":"13","parent_id":"3","name":"Denim","is_active":"1","position":"5","level":"3","children":[]},{"category_id":"14","parent_id":"3","name":"Outerwear","is_active":"1","position":"6","level":"3","children":[]},{"category_id":"15","parent_id":"3","name":"Shoes","is_active":"1","position":"7","level":"3","children":[]},{"category_id":"16","parent_id":"3","name":"Jackets","is_active":"1","position":"8","level":"3","children":[]},{"category_id":"17","parent_id":"3","name":"Accessories","is_active":"1","position":"9","level":"3","children":[]}]},{"category_id":"4","parent_id":"2","name":"Women","is_active":"1","position":"2","level":"2","children":[{"category_id":"18","parent_id":"4","name":"New","is_active":"1","position":"1","level":"3","children":[]},{"category_id":"19","parent_id":"4","name":"Tops","is_active":"1","position":"2","level":"3","children":[]},{"category_id":"20","parent_id":"4","name":"Bottoms","is_active":"1","position":"3","level":"3","children":[]},{"category_id":"21","parent_id":"4","name":"Denim","is_active":"1","position":"4","level":"3","children":[]},{"category_id":"22","parent_id":"4","name":"Outerwear","is_active":"1","position":"5","level":"3","children":[]},{"category_id":"23","parent_id":"4","name":"Shoes","is_active":"1","position":"6","level":"3","children":[]},{"category_id":"24","parent_id":"4","name":"Jackets","is_active":"1","position":"7","level":"3","children":[]},{"category_id":"25","parent_id":"4","name":"Accessories","is_active":"1","position":"8","level":"3","children":[]}]},{"category_id":"5","parent_id":"2","name":"Men","is_active":"1","position":"3","level":"2","children":[]},{"category_id":"6","parent_id":"2","name":"Accessories","is_active":"1","position":"4","level":"2","children":[]},{"category_id":"7","parent_id":"2","name":"Sale","is_active":"1","position":"5","level":"2","children":[]},{"category_id":"26","parent_id":"2","name":"Men2","is_active":"1","position":"6","level":"2","children":[]}]}]}}

So try this

response.data.category.children;