Fetch and display data from web service in ionic/angularJS

Question

I am building an app using ionic/AngularJS. To test the web service calls I am using the best buy service. The response is as follows:

{
  "from": 1,
  "to": 10,
  "total": 4665,
  "currentPage": 1,
  "totalPages": 467,
  "queryTime": "0.009",
  "totalTime": "0.045",
  "partial": false,
  "canonicalUrl": "/v1/categories?format=json&apiKey=****",
  "categories": [
    {
      "id": "abcat0010000",
      "name": "Gift Ideas",
      "active": true,
      "path": [
        {
          "id": "cat00000",
          "name": "Best Buy"
        },
        {
          "id": "abcat0010000",
          "name": "Gift Ideas"
        }
      ],
      "subCategories": [
        {
          "id": "pcmcat140000050035",
          "name": "Capturing Photos & Videos"
        },
        {
          "id": "pcmcat140000050036",
          "name": "Listening to Digital Music"
        },
        {
          "id": "pcmcat140000050037",
          "name": "Computing Made Easy"
        },
        {
          "id": "pcmcat140000050039",
          "name": "Simple GPS Navigation"
        },
        {
          "id": "pcmcat140000050040",
          "name": "Playing Video Games"
        },
        {
          "id": "pcmcat140000050041",
          "name": "Watching HDTV"
        },
    .........

How can I retrieve and display this information as a list on my device? I am aware of the $http service request, but how do I incorporate this into an ionic list?

Answer 1

Assuming that you already have written the logic to fetch data I have written this JSBin for implementing ion-list.

Answer 2

Let's Assume you are going to display the name field in your list.

app.js

var baseURL="*here your json request*";

var categoriesName=[];

$http.get('baseURL')
 .success(function(response){

   $scope.objectResponse = response.categories;
   console.log($scope.objectResponse);

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

 .error(function(response){
   console.log(response);
 });

html

<ul class="list">
    <li class="item" ng-repeat="listname in categoriesName">
      {{listname}}
    </li>
</ul>

This is How your can retrieve and display this information as a list on device.