Implement the insertion of JSON items in real-time by leveraging the power of Angular JS and

Question

Implement the insertion of JSON items in real-time by leveraging the power of Angular JS and

I'm facing a challenge trying to insert JSON items into a dynamic list:

The structure of my JSON file is as follows:

[
{
"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 aim to display it in this format:

Below is the code snippet I am using:

<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;                
        });

});

The current output displayed is like this:

javascript json angularjs

Answer 1

Answer №1

To easily display the data, it is recommended to preprocess the information to reveal its underlying structure. Utilizing nested repeaters can then help organize and showcase the data effectively.

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>

Answer 2

To easily display the data, it is recommended to preprocess the information to reveal its underlying structure. Utilizing nested repeaters can then help organize and showcase the data effectively.

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>

Answer 3

Answer №2

One reason for this issue is that the first loop iterates through a list of 4 items without any logic to prevent duplicates of countries already listed.

Problem

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

Solution: Implement a filter to display only unique Countries (which may require creating a separate 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>

Answer 4

One reason for this issue is that the first loop iterates through a list of 4 items without any logic to prevent duplicates of countries already listed.

Problem

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

Solution: Implement a filter to display only unique Countries (which may require creating a separate 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>

Implement the insertion of JSON items in real-time by leveraging the power of Angular JS and

Answer №1

Answer №2

Similar questions

Unable to assign value to Angular scope variable

Linking controller scope to service characteristics

Tips for building a responsive dropdown menu using data from a database query

Utilize Jquery to dynamically modify the content on a webpage

Tips for dynamically updating the id value while iterating through a class

Clicking on a DIV using jQuery, with anchor elements

Eliminate time elements that are in close proximity from a JSON array

Whenever my NodeJs encounters an unhandledPromise, it throws an error

Navigating to a new page by selecting a row in a material-ui table

AXE - Asp Xtreme Evolution - A cutting-edge JSON parser designed specifically for classic ASP development

Is it possible to dynamically load a specific div when the page loads, relying on the

The triggering of routing in Next.js is not established by useEffect

Obtaining a JSON file using Python

Using AngularJS to transfer data from a datepicker to an ng-model

Attempting to rename the "like" button in Django Ajax, however encountering difficulties

The HTML checkbox remains unchanged even after the form is submitted

What is the best way to implement my custom toolbar button to utilize the form's validation function within react-admin?

Challenges associated with utilizing img src in JavaScript

Are your file uploaders malfunctioning by saving empty image files?

Changing a date string to MM DD format in React without using plain JavaScript