current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them, it only takes a minute:
up vote 3 down vote favorite
1

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.

share|improve this question

3 Answers 3

up vote 3 down vote accepted

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

share|improve this answer
    
Thanks @BenBlack, appreciated. – bobighorus Apr 15 at 16:04
2  
Your solution works; just change "Class" name of the variable because it's a reserved name and it breaks the all thing. – bobighorus Apr 15 at 16:08
    
No problem, glad I could help. The new answer below shows a better way of combining them than what I provided here. – Ben Black Apr 15 at 16:08
    
Ah good point, that's what I get for not using an IDE to write this up quickly. – Ben Black Apr 15 at 16:08
    
A strange thing that I noticed just now, is that your code returns "undefined" as first value; now I'm trying to understand why. – bobighorus Apr 15 at 16:13
up vote 2 down vote

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.

share|improve this answer
up vote 1 down vote

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>

share|improve this answer
    
Thanks @sylwester. Speaking in terms of performance, which is the best solution according to you guys between this one and Ben's solution? – bobighorus Apr 15 at 16:36
1  
@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 – sylwester Apr 15 at 16:58

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.