Insert dynamically a JSON items using Angular JS and Ionic

Question

I have been struggling on how to insert JSON items into a dynamic list :

I have a json file which look like :

[
{
"id":"34",
"City":"New York",
"Country":"USA"
},
{
"id":"22",
"City":"Las vegas",
"Country":"USA"
},
{
"id":"44",
"City":"Paris",
"Country":"France"
},
{
"id":"45",
"City":"Lyon",
"Country":"France"
}
]

I want to show it like that :

Screenshot

Here is my code :

<div ng-controller="customersCtrl"> 
<div class="list">
<div ng-repeat="c in cities">
<div class="item item-divider" >
{{ c.Country }}
</div>
 <a class="item" href="#" ng-repeat="ci in cities" ng-if="c.Country == ci.Country"> {{ ci.City }} </a>
</div>

var app = angular.module('starter', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get('data.json')
       .then(function(result){
          $scope.cities = result.data;                
        });

});

it's showing like that :

enter image description here

Elliot Swart · Accepted Answer · 2015-05-20 16:12:20Z

The easiest way to do this is pre-process the data to show the inherent structure of your data. Then you can use nested repeaters.

angular.module('cityModule', []).
controller('CityController', ['$scope',
  function($scope) {
    var rawData = [{
      "id": "34",
      "City": "New York",
      "Country": "USA"
    }, {
      "id": "22",
      "City": "Las vegas",
      "Country": "USA"
    }, {
      "id": "44",
      "City": "Paris",
      "Country": "France"
    }, {
      "id": "45",
      "City": "Lyon",
      "Country": "France"
    }];

    $scope.citiesByCountry = {};
    
    for (var i = 0; i < rawData.length; i++) {
      var city = rawData[i];

      if ($scope.citiesByCountry[city.Country] == undefined) {
        $scope.citiesByCountry[city.Country] = {};
        $scope.citiesByCountry[city.Country].name = city.Country;
        $scope.citiesByCountry[city.Country].cities = [];
      }

      $scope.citiesByCountry[city.Country].cities.push(city);
    }

  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="cityModule">
  <div ng-controller="CityController">
    <div ng-repeat="(countryName, country) in citiesByCountry">
      <h1>{{country.name}}</h1>
      <div ng-repeat="city in country.cities">
        {{city.City}}
      </div>

    </div>
  </div>
</body>

UsainBloot · Accepted Answer · 2015-05-20 16:04:53Z

This is due to the first loop, there are 4 items in the list and there is not any logic to stop the list from repeating on countries which have already been written.

Issue

<div ng-repeat="c in cities">
<div class="item item-divider" >
{{ c.Country }}

Create a filter to loop over unique Countries (this may involve creating a new list of unique countries).

Unique Filter

app.filter('unique', function() {
   return function(collection, keyname) {
      var output = [], 
          keys = [];

      angular.forEach(collection, function(item) {
          var key = item[keyname];
          if(keys.indexOf(key) === -1) {
              keys.push(key);
              output.push(item);
          }
      });

      return output;
   };
});

<div ng-repeat="c in cities | unique: 'Country'"></div>

Collectives™ on Stack Overflow

Insert dynamically a JSON items using Angular JS and Ionic

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related