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.

Answer 1

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