Parse JSON array values with AngularJs to text strings

Question

I need to access to the values inside the array "position" of this json file using AngularJS. My problem is that I need to get them as text string values, because I need to add them as css class name inside a tag, basically like this:

<div class="europe italy rome"></div>
<div class="europe france paris></div>
<div class="america usa atlanta></div>

This is my Json file:

 [
      {
        "name": "Rome",
        "position": ["europe", "italy", "rome"]
      },
      {
        "name": "Paris",
        "position": ["europe", "france", "paris"]
      },
      {
        "name": "Rome",
        "position": ["america", "usa", "atlanta"]
      }
]

I'm not able to figure it out how to do this. Thank you in advance for your suggestions.

mohamedrias · Accepted Answer · 2015-04-11 10:37:31Z

2

You can just join the text inside array.

angular.module("app",[])
.controller("MainCtrl", function($scope) {
   $scope.styles = [
  {
"name": "Rome",
"position": ["europe", "italy", "rome"]
  },
  {
"name": "Paris",
"position": ["europe", "france", "paris"]
  },
  {
"name": "Rome",
"position": ["america", "usa", "atlanta"]
  }
];

});

<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="MainCtrl">

 <div ng-repeat="style in styles" ng-class="style.position.join(' ')">
   applied style : {{style.position.join(' ')}}
 </div>
</body>
</html>

answered Apr 11, 2015 at 10:37

mohamedrias

18.6k3 gold badges41 silver badges47 bronze badges

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

1 Comment

bobighorus Over a year ago

Great solution! Simple and effective! Thank you @mohamedrias!

Collectives™ on Stack Overflow

Parse JSON array values with AngularJs to text strings

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related