I am creating some angularjs application with the use of nested json data.
Facing problem to deal with ngRepeat in some area. Please refer the image below
var eventsApp = angular.module('eventsApp', []);
eventsApp.controller('locationController',
function locationController($scope) {
$scope.event = {
"continents": [{
"continentName": "Asia",
"countries": [{
"countryName": "India",
"cities": [{
"cityname": "Mumbai",
"latLng": [19.139683, 72.881755],
"pinColor": "#004b88",
"addresses": [
"<div class='address'>Gate #5, L&T Business Tower B, 2nd floor, Saki Vihar Road, Powai (East), Mumbai - 400072,India</div>",
"<div class='address'>Gate #6, L&T Business Tower B, 2nd floor, Saki Vihar Road, Powai (East), Mumbai - 400072,India</div>"
]
}, {
"cityname": "Bangalore",
"latLng": [12.967715, 77.596607],
"pinColor": "#004b88",
"addresses": [
"<div class='address'>Plot No 25-31, EPIP 2nd Phase, Industrial Area, Whitefield, Bangalore-560066. India</div>"
]
}, {
"cityname": "Vadodara",
"latLng": [22.297864, 73.168966],
"pinColor": "#004b88",
"addresses": [
"<div class='address'>L&T Knowledge City, West Block, NH 8, Ajwa – Waghodia Crossing, Vadodara – 390 019, Gujarat, India Tel. : +91 265 245 1000</div>"
]
}, {
"cityname": "Mysore",
"latLng": [12.306326, 76.629660],
"pinColor": "#004b88",
"addresses": [
"<div class='address'>Mysore Complex, KIADB Industrial Area, Hebbal - Hootagalli, Mysore - 570018, India</div>"
]
}, {
"cityname": "Chennai",
"latLng": [13.078007, 80.211203],
"pinColor": "#004b88",
"addresses": [
"<div class='address'>Ganesh Office Building, New No. 50 (Old No. 130) Velachery Road, Saidapet, Chennai – 600015, India</div>"
]
}]
}, {
"countryName": "Japan",
"cities": [{
"cityname": "YOKOHAMA",
"latLng": [35.466913, 139.617877],
"pinColor": "#004b88",
"addresses": [
"<div class='address'>Landmark Tower 37 F 2-2-1, Minatomirai, Nishi-ku, Yokohama,Kanagawa 220-8137</div>",
"<div class='address'></div>",
"<div class='address'></div>"
]
}]
}, {
"countryName": "Singapore",
"cities": [{
"cityname": "",
"latLng": [1.296961, 103.846253],
"pinColor": "#004b88",
"addresses": [
"<div class='address'>80 Anson Road, #24-02 Fuji Xerox Towers, Singapore 079907</div>"
]
}]
}, {
"countryName": "Korea",
"cities": [{
"cityname": "South Korea",
"latLng": [36.354133, 128.184051],
"pinColor": "#004b88",
"addresses": [
"<div class='address'>#102-604, 6th Floor, Daewoo World Mark Building, YeongTong Dong, YeongTong Gu, Suwon Si, Gyoenggi Do, South Korea</div>"
]
}]
}]
}, {
"continentName": "USA",
"countries": [{
"countryName": "",
"cities": [{
"cityname": "NEW JERSEY",
"latLng": [39.575889, -74.906897],
"pinColor": "#004b88",
"addresses": [
"<div class='address'>2035 Lincoln Highway Suite # 3000-3005, Edison Square West, Edison, NJ-08817</div>"
]
}, {
"cityname": "CONNECTICUT",
"latLng": [41.646227, -72.870117],
"pinColor": "#004b88",
"addresses": [
"<div class='address'>750 Main Street Suite # 704 Hartford, CT 06103</div>"
]
}]
}]
}]
}
});body {
margin: 0;
padding: 0;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
li {
padding: 0;
margin: 0;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.angularjs.org/1.4.9/angular.js"></script>
<div ng-app="eventsApp" ng-controller="locationController">
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
</ul>
</div>
</div>
<div>
<img ng-src="{{event.imageUrl}}" alt="{{event.name}}" />
<div class="row">
<div class="span1">
<h2>{{event.name}} </h2>
</div>
</div>
<hr />
<ul class="thumbnail">
<li ng-repeat="continent in event.continents">
<div class="row session">
<h2>{{continent.continentName}}</h2>
<div class="well span9">
<ul class="thumbnail">
<li ng-repeat="countryName in event.countries">
<h2>{{countryName}}</h2>
</li>
</ul>
</div>
<div ng-repeat="cities in event.cities">
<h3>{{cities}}</h3>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
