Print nested JSON array values in AngularJS with ng-repeat

Question

I need to access the values of "city" and "nation" inside the array the following json file using AngularJS with ng-repeat.

This is my Json file:

[
      {
        "name": "first",
        "location": [
            {
                "city" : "milan",
                "nation" : "italy"
            }
        ],
        "visibility": 1
      },
{
        "name": "second",
        "location": [
            {
                "city" : "new york",
                "nation" : "usa"
            },
            {
                "city" : "london",
                "nation" : "uk"
            }

        ],
        "visibility": 1
      }
]

My problem is that I need to get City and Nation as text string values, because I need to add them as css class name inside a tag, basically like this:

<div class="milan italy"></div>
<div class="new york usa london uk></div>

I'm not able to figure it out how to do this.

I tried with this code but nothing is shown:

<div ng-repeat-start="tile in tiles"></div>
     <div class="mix {{ tile.location.city }} {{ tile.location.nation }}"></div>
<div ng-repeat-end></div>

Thank you in advance for your suggestions.

bamblack · Accepted Answer · 2015-04-17 21:35:54Z

3

As @MattDionis said, you would need to specify ng-class, not just class. What you can try is using a function for ng-class. So you can do

<div ng-repeat="tile in tiles">
    <div ng-class="getLocation(tile)"></div>
</div>

$scope.getLocation = function(tile) {
    var resp = '';
    for (var i = tile.location.length; i-- > 0;) {
        resp = resp + tile.location[i].city + ' ' + tile.location[i].nation;
    }
    return resp;
}

I'm sure there's a better way to combine them than that, but that's what I came up with off-hand

edited Apr 17, 2015 at 21:35

answered Apr 15, 2015 at 15:52

bamblack

3,7892 gold badges28 silver badges43 bronze badges

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

7 Comments

bobighorus Over a year ago

Thanks @BenBlack, appreciated.

bobighorus Over a year ago

Your solution works; just change "Class" name of the variable because it's a reserved name and it breaks the all thing.

bamblack Over a year ago

No problem, glad I could help. The new answer below shows a better way of combining them than what I provided here.

bamblack Over a year ago

Ah good point, that's what I get for not using an IDE to write this up quickly.

bobighorus Over a year ago

A strange thing that I noticed just now, is that your code returns "undefined" as first value; now I'm trying to understand why.

|

MattDionis · Accepted Answer · 2015-04-15 15:45:41Z

2

First, you want to use ng-class rather than simply class to properly evaluate those bindings.

Also, tile.location appears to be an array of objects rather than simply an object. Therefore, {{ tile.location.city }} would not work, but {{ tile.location[0].city }} should.

The remaining issue would be how to loop through mutliple city/nation values within ng-class. I'll get back to you on that.

answered Apr 15, 2015 at 15:45

MattDionis

3,62610 gold badges55 silver badges111 bronze badges

Comments

sylwester · Accepted Answer · 2015-04-15 16:05:24Z

1

Please see demo below

You can create function to transform your array of object to string ie:

 $scope.tostring = function (array) {
        var res = "";
        angular.forEach(array, function (obj) {

            console.log(obj);

            for (var k in obj) {
                if (obj.hasOwnProperty(k)) {
                    res += " " +obj[k];
                }
            }


        });
        return res;
    };

var app = angular.module('app', []);

angular.module('app').controller('homeCtrl', homeCtrl);

homeCtrl.inject = ['$scope'];

function homeCtrl($scope) {

  $scope.titles = [{
    "name": "first",
    "location": [{
      "city": "milan",
      "nation": "italy"
    }],
    "visibility": 1
  }, {
    "name": "second",
    "location": [{
        "city": "new york",
        "nation": "usa"
      }, {
        "city": "london",
        "nation": "uk"
      }

    ],
    "visibility": 1
  }];

  $scope.tostring = function(array) {
    var res = "";
    angular.forEach(array, function(obj) {

      console.log(obj);

      for (var k in obj) {
        if (obj.hasOwnProperty(k)) {
          res += " " + obj[k];
        }
      }


    });
    return res;
  };

}

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body ng-controller="homeCtrl">


  <div ng-repeat="title in titles">
    <h3 ng-class="tostring(title.location)">{{title.name}} My class is:*{{tostring(title.location)}}* </h3>

   


  </div>
</body>

</html>

answered Apr 15, 2015 at 16:05

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

2 Comments

bobighorus Over a year ago

Thanks @sylwester. Speaking in terms of performance, which is the best solution according to you guys between this one and Ben's solution?

sylwester Over a year ago

@bobighorus ben solution might be better in terms of performance as he just checking 2 keys for each object (nation and city) mine is more generic adding all property values to result so you don't have to worry if you change code in future, but maybe you wouldn't change ... so you know the best

Collectives™ on Stack Overflow

Print nested JSON array values in AngularJS with ng-repeat

3 Answers 3

7 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related