Develop Reference

Binding Object to Vue multi-select

I have a table with two columns(Location and Users). The location is static information but the users is a multi-select using Vue-Select.
I need to shows users currently selected for a location on page load. I grab that information from a database.
I also need to be able to change the selected users of a location by using a multi-select that shows all users. Example Mock
Vue Outline
<table>
<thead>
<tr>
<th class="col-xs-2">Locations</th>
<th class="col-xs-8">Users</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in rows" v-bind:key="index">
<td>
<span>{{ row.location }}</span>
</td>
<td>
<v-select multiple v-model="row.users">
<option v-for="user in allUsers" :key="user.id" :value="user.id">{{ user.name }}</option>
</v-select>
</td>
</tr>
</tbody>
</table>
Vue
var app = new Vue({
el: '#el',
data() {
return {
errors: [],
loading: false,
rows: this.assignments,
allUsers: this.users
}
},
props: {
assignments: Array,
users: Array
},
})
Example of how rows are returned from database
[{
"locations":[
{ "id":1,
"name":"SomePlace, CA",
"users": [
{"id":1, "name":"Person One"},
{"id":2, "name":"Person Two"}
]
},
{ "id":2,
"name":"AnotherPlace, CA",
"users": [
{"id":3, "name":"Person Three"}
]
}
]
},
{
"locations":[
{ "id":1,
"name":"SomePlace, CA",
"users": [
{"id":1, "name":"Person One"},
{"id":2, "name":"Person Two"}
]
},
{ "id":2,
"name":"AnotherPlace, CA",
"users": [
{"id":3, "name":"Person Three"}
]
}
]
}]
Example of how all users are returned from database
[
["id":1, "name":"Person One"],
["id":2, "name":"Person Two"],
["id":3,"name":"Person Three"],
]

I had moved the data coming via props directly to data object, since your rows property has one item which contains locations array, i looped through the first item rows[0] and i put row as the select options :options="row" and for the second column i looped through the user of the selectedLocation :
Vue.component('v-select', VueSelect.VueSelect)
var app = new Vue({
el: '#app',
data() {
return {
errors: [],
loading: false,
rows: [{
"locations": [{
"id": 1,
"name": "SomePlace, CA",
"users": [{
"id": 1,
"name": "Person One"
},
{
"id": 2,
"name": "Person Two"
}
]
},
{
"id": 2,
"name": "AnotherPlace, CA",
"users": [{
"id": 3,
"name": "Person Three"
}]
}
]
},
{
"locations": [{
"id": 1,
"name": "SomePlace, CA",
"users": [{
"id": 1,
"name": "Person One"
},
{
"id": 2,
"name": "Person Two"
}
]
},
{
"id": 2,
"name": "AnotherPlace, CA",
"users": [{
"id": 3,
"name": "Person Three"
}]
}
]
}
],
allUsers: this.users
}
},
props: {
assignments: Array,
users: Array
},
})
<table>
<thead>
<tr>
<th class="col-xs-2">Locations</th>
<th class="col-xs-8">Users</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in rows[0].locations" v-bind:key="index">
<td class="lead-locations">
{{row.name}}
</td>
<td class="lead-users">
<v-select multiple v-model="row.users" label="name">
</v-select>
</td>
</tr>
</tbody>
</table>
for demo check this code

I believe that the sample data supplied to the "rows" variable are missing.
So, I will make an imaginary assumption here that you have some web servers distributed in multiple locations and you want to manage access of users.
The following is my imaginary data for "rows" variable which is close enough to your data:
[
{
"serverID": 1,
"serverName": "My Backend API Server",
"locations": [
{
"id": 1,
"name": "SomePlace, CA",
"users": [
{ "id": 1, "name": "Person One" },
{ "id": 2, "name": "Person Two" }
]
},
{
"id": 2,
"name": "AnotherPlace, CA",
"users": [{ "id": 3, "name": "Person Three" }]
}
]
},
{
"serverID": 1,
"serverName": "My Frontend App Server",
"locations": [
{
"id": 1,
"name": "SomePlace, CA",
"users": [
{ "id": 1, "name": "Person One" },
{ "id": 2, "name": "Person Two" }
]
},
{
"id": 2,
"name": "AnotherPlace, CA",
"users": [{ "id": 3, "name": "Person Three" }]
}
]
}
]
Now, we have to loop over the servers array first, then loop over the locations array to get some thing close to your mock as follows:
Check this pen for the implementation.
JS Code:
Vue.component('v-select', VueSelect.VueSelect)
let servers = [
{
"serverID": 1,
"serverName": "My Backend API Server",
"locations": [
{
"id": 1,
"name": "SomePlace, CA",
"users": [
{ "id": 1, "name": "Person One" },
{ "id": 2, "name": "Person Two" }
]
},
{
"id": 2,
"name": "AnotherPlace, CA",
"users": [{ "id": 3, "name": "Person Three" }]
}
]
},
{
"serverID": 1,
"serverName": "My Frontend App Server",
"locations": [
{
"id": 1,
"name": "SomePlace, CA",
"users": [
{ "id": 1, "name": "Person One" },
{ "id": 2, "name": "Person Two" }
]
},
{
"id": 2,
"name": "AnotherPlace, CA",
"users": [{ "id": 3, "name": "Person Three" }]
}
]
}
];
let users = [
{"id":1, "name":"Person One"},
{"id":2, "name":"Person Two"},
{"id":3,"name":"Person Three"},
];
var app = new Vue({
el: '#app',
data() {
return {
errors: [],
loading: false,
selectedLocation: {},
rows: servers,
allUsers: users
}
}
})
HTML Code:
<div id="app">
<table>
<thead>
<tr>
<th class="col-xs-2">Locations</th>
<th class="col-xs-8">Users</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in rows" v-bind:key="index">
<td colspan="2">
<b>{{ row.serverName }}</b>
<table>
<tr v-for="(location, l_index) in row.locations" v-bind:key="l_index">
<td class="col-xs-2">{{ location.name }}</td>
<td class="col-xs-8">
<v-select multiple v-model="location.users" label="name" :options="allUsers">
</v-select>
</td>
</tr>
</table>
</td>
<td class="lead-locations">
{{ row.locations.name }}
</td>
<td class="lead-users">
</td>
</tr>
</tbody>
</table>
</div>

Populating table based on dynamic created headers AngularJs

First to introduce to my table structure:
<div class="col-md-9">
<table class="table table-bordered">
<thead>
<tr>
<th>Date</th>
<th>Pair</th>
<th id="{{odds.id}}" ng-repeat="odds in list">{{odds.odd.name}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="match in matches ">
<td>{{match.sd | parseMomentDate}}</td>
<td>{{match.h}}-{{match.a}}</td>
<td>{{match.odds.drawNoBet.value}}<span ng-if="!match.drawNoBet.value">--</span></td>
</tr>
</tbody>
</table>
</div>
I am listing odd names, and therefore setting up id attr for the element.
So my problem is how to populate the rest of the table, the table data based on the Id from the table head, every table head to have rows and columns populated based on that id?
I have the next structure of receiving the data:
"id": 4413011,
"sd": "2017-04-27T23:30:00.000+0400",
"h": "Athletic Bilbao",
"a": "Betis Sevilla",
"odds": {
"bothToScore": [
{
"name": "no",
"value": 1.85,
"id": 552240303
},
{
"name": "yes",
"value": 1.95,
"id": 552240338
}
],
"doubleChance": [
{
"name": "12",
"value": 1.22,
"id": 552240012
},
{
"name": "x2",
"value": 2.98,
"id": 552240003
},
{
"name": "1x",
"value": 1.11,
"id": 552240079
}
],
"drawNoBet": [
{
"name": "1",
"value": 1.15,
"id": 552240007
},
{
"name": "2",
"value": 6.15,
"id": 552240267
}
],
"totalGoals": [
{
"name": "under",
"value": 2.15,
"id": 552235662
},
{
"name": "over",
"value": 1.7,
"id": 552235663
}
]
}
},
So for example in the odds object there is a list "bothToScore", therefore "bothToScore" is the id for the table head, and based on that id need to populate the rest of the columns, meaning ;Yes' or 'No'.
Any suggestions?

At this case id mapping is not needed - just ensure same order of <th>s and <tr>s:
angular.module('app', []).controller('ctrl', ['$scope', function($scope) {
$scope.matches = [{
"id": 4413011,
"sd": "2017-04-27T23:30:00.000+0400",
"h": "Athletic Bilbao",
"a": "Betis Sevilla",
"odds": {
"bothToScore": [{
"name": "no",
"value": 1.85,
"id": 552240303
},
{
"name": "yes",
"value": 1.95,
"id": 552240338
}],
"doubleChance": [{
"name": "12",
"value": 1.22,
"id": 552240012
},
{
"name": "x2",
"value": 2.98,
"id": 552240003
},
{
"name": "1x",
"value": 1.11,
"id": 552240079
}],
"drawNoBet": [{
"name": "1",
"value": 1.15,
"id": 552240007
},
{
"name": "2",
"value": 6.15,
"id": 552240267
}],
"totalGoals": [{
"name": "under",
"value": 2.15,
"id": 552235662
},
{
"name": "over",
"value": 1.7,
"id": 552235663
}]
}
}];
$scope.matches.push(JSON.parse(JSON.stringify($scope.matches[0])));
}]);
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller="ctrl">
<table>
<thead>
<tr>
<th>Date</th>
<th>Pair</th>
<th ng-repeat-start='(key, value) in matches[0].odds' hidden></th>
<th ng-repeat-end ng-repeat='item in value'>{{item.name}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='match in matches'>
<td>{{match.sd | date}}</td>
<td>{{match.h}} - {{match.a}}</td>
<td ng-repeat-start='(key, value) in match.odds' hidden></td>
<td ng-repeat-end ng-repeat='item in value'>{{item.value}}</td>
</tr>
</tbody>
</table>
</div>

HTML Table dynamically generate columns using ng-repeat

Can you please help me generating HTML Table by using the JSON data with Angular ng-repeat.
Demo
JSON Data
{
"account": {
"accountId": "54545",
"premise": {
"address": {
"address1": "1800 Bishop Gate Boulevard",
"address2": "Apartment 129",
"city": "Mount Laurel",
"province": "NJ",
"postalCode": "08054",
"country": "US",
"direction": null,
"externalReference": null,
"verified": false
},
"timeZone": "US_EASTERN",
"locale": "EN",
"camera": [
{
"id": "175277.2",
"name": "camera1",
"macAddress": "00:0E:8F:5B:AB:88",
"manufacturer": "gabreal",
"model": "iCamera",
"serialNumber": "000E8F5BAB88",
"firmwareVersion": "3.0.01.07",
"hardwareVersion": null
},
{
"id": "175277.3",
"name": "camera2",
"macAddress": "D4:21:22:D9:D0:73",
"manufacturer": "gabreal",
"model": "iCamera2-C",
"serialNumber": "D42122D9D073",
"firmwareVersion": "3.0.02.39",
"hardwareVersion": null
},
{
"id": "175277.1",
"name": "camera3",
"macAddress": "00:0E:8F:95:A8:A6",
"manufacturer": "gabreal",
"model": "SerComm_Camera_8021",
"serialNumber": "000E8F95A8A6",
"firmwareVersion": "1.0.24",
"hardwareVersion": null
}
],
"thermostat": [
{
"id": "0024460000084172.10",
"name": "Thermostat1",
"type": "THERMOSTAT",
"manufacturer": "RTCOA",
"serialNumber": null,
"firmwareVersion": "0x00000587",
"hardwareVersion": "192",
"model": "CT30S"
},
{
"id": "000d6f0003ec6669.1",
"name": "Thermostat2",
"type": "THERMOSTAT",
"manufacturer": "CentraLite Systems",
"serialNumber": null,
"firmwareVersion": "0x1418468c",
"hardwareVersion": "2",
"model": "3156105"
}
],
"zone": [
{
"id": 1,
"name": "one",
"type": "DOOR",
"functionType": "ENTRY_EXIT",
"sensor": [
{
"id": 1,
"type": "DRY_CONTACT",
"sourceType": "ZIGBEE",
"serialNumber": "000d6f00030cdbcf.1",
"model": "MCT-320 SMA",
"manufacturer": "Visonic",
"firmwareVersion": "0x00040008",
"hardwareVersion": "1"
}
]
},
{
"id": 2,
"name": "Motion",
"type": "MOTION",
"functionType": "INTERIOR_FOLLOWER",
"sensor": [
{
"id": 2,
"type": "MOTION",
"sourceType": "ZIGBEE",
"serialNumber": "000d6f0004b2af93.1",
"model": "NEXT K85 SMA",
"manufacturer": "Visonic",
"firmwareVersion": "0x0004000b",
"hardwareVersion": "1"
}
]
}
],
"cpe": {
"cpeId": "9c972684b2ca",
"name": null,
"deploymentModel": "WIFI_CLIENT_PSK_2_MODE",
"serialNumber": null,
"manufacturer": "Technicolor",
"model": "TCA203",
"hardwareRev": "5",
"passPhrase": "528233",
"cellularProfileName": null,
"imeiNumber": 359942045924230,
"iccId": "89011703258034552401",
"simCardPhoneNumber": null,
"simCardAccountNumber": null,
"wifiMacAddress": "70:25:59:79:E2:EE",
"firmwareVersion": "7_3_8_050000_201611152386",
"widget": [
{
"name": "com.wsi.android.Gabreal",
"version": "1.2"
},
{
"name": "com.icontrol.apps.clock",
"version": "1.0.0.0.3"
}
],
"module": []
},
"premiseId": null
},
"source": "INTERNAL"
}
}
The table I want to generate as below
<table>
<tr>
<th>Property<br></th>
<th>camera</th>
<th>camera</th>
<th>camera</th>
<th>thermostat</th>
<th>thermostat</th>
<th>sensor</th>
<th>sensor</th>
</tr>
<tr>
<td>id</td>
<td>175277.2</td>
<td>175277.3</td>
<td>175277.1</td>
<td>0024460000084172.10</td>
<td>000d6f0003ec6669.1</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>name</td>
<td>camera1</td>
<td>camera2</td>
<td>camera3</td>
<td>Thermostat1</td>
<td>Thermostat2</td>
<td></td>
<td></td>
</tr>
<tr>
<td>macAddress</td>
<td>00:0E:8F:5B:AB:88</td>
<td>D4:21:22:D9:D0:73</td>
<td>00:0E:8F:95:A8:A6</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>manufacturer</td>
<td>gabreal</td>
<td>gabreal</td>
<td>gabreal</td>
<td>RTCOA</td>
<td>CentraLite Systems</td>
<td>Visonic</td>
<td>Visonic</td>
</tr>
</table>
Note : Aruna has answered the question, but it fails when there different type JSON Object like zone object is different from others.

This is a generic solution with the object and the properties.
Updated as per the json change on the Bounty request.
var app = angular.module('studentApp', []);
app.controller('StudentCntrl', function($scope,$http) {
//$http.get('data.json').then(function (response){
//console.log(response.data.pages);
//$scope.deviceInfo = response.data.account.premise;
//});
var responseData = {
"account": {
"accountId": "54545",
"premise": {
"address": {
"address1": "1800 Bishop Gate Boulevard",
"address2": "Apartment 129",
"city": "Mount Laurel",
"province": "NJ",
"postalCode": "08054",
"country": "US",
"direction": null,
"externalReference": null,
"verified": false
},
"timeZone": "US_EASTERN",
"locale": "EN",
"camera": [
{
"id": "175277.2",
"name": "camera1",
"macAddress": "00:0E:8F:5B:AB:88",
"manufacturer": "gabreal",
"model": "iCamera",
"serialNumber": "000E8F5BAB88",
"firmwareVersion": "3.0.01.07",
"hardwareVersion": null
},
{
"id": "175277.3",
"name": "camera2",
"macAddress": "D4:21:22:D9:D0:73",
"manufacturer": "gabreal",
"model": "iCamera2-C",
"serialNumber": "D42122D9D073",
"firmwareVersion": "3.0.02.39",
"hardwareVersion": null
},
{
"id": "175277.1",
"name": "camera3",
"macAddress": "00:0E:8F:95:A8:A6",
"manufacturer": "gabreal",
"model": "SerComm_Camera_8021",
"serialNumber": "000E8F95A8A6",
"firmwareVersion": "1.0.24",
"hardwareVersion": null
}
],
"thermostat": [
{
"id": "0024460000084172.10",
"name": "Thermostat1",
"type": "THERMOSTAT",
"manufacturer": "RTCOA",
"serialNumber": null,
"firmwareVersion": "0x00000587",
"hardwareVersion": "192",
"model": "CT30S"
},
{
"id": "000d6f0003ec6669.1",
"name": "Thermostat2",
"type": "THERMOSTAT",
"manufacturer": "CentraLite Systems",
"serialNumber": null,
"firmwareVersion": "0x1418468c",
"hardwareVersion": "2",
"model": "3156105"
}
],
"zone": [
{
"id": 1,
"name": "one",
"type": "DOOR",
"functionType": "ENTRY_EXIT",
"sensor": [
{
"id": 1,
"type": "DRY_CONTACT",
"sourceType": "ZIGBEE",
"serialNumber": "000d6f00030cdbcf.1",
"model": "MCT-320 SMA",
"manufacturer": "Visonic",
"firmwareVersion": "0x00040008",
"hardwareVersion": "1"
}
]
},
{
"id": 2,
"name": "Motion",
"type": "MOTION",
"functionType": "INTERIOR_FOLLOWER",
"sensor": [
{
"id": 2,
"type": "MOTION",
"sourceType": "ZIGBEE",
"serialNumber": "000d6f0004b2af93.1",
"model": "NEXT K85 SMA",
"manufacturer": "Visonic",
"firmwareVersion": "0x0004000b",
"hardwareVersion": "1"
}
]
}
],
"cpe": {
"cpeId": "9c972684b2ca",
"name": null,
"deploymentModel": "WIFI_CLIENT_PSK_2_MODE",
"serialNumber": null,
"manufacturer": "Technicolor",
"model": "TCA203",
"hardwareRev": "5",
"passPhrase": "528233",
"cellularProfileName": null,
"imeiNumber": 359942045924230,
"iccId": "89011703258034552401",
"simCardPhoneNumber": null,
"simCardAccountNumber": null,
"wifiMacAddress": "70:25:59:79:E2:EE",
"firmwareVersion": "7_3_8_050000_201611152386",
"widget": [
{
"name": "com.wsi.android.Gabreal",
"version": "1.2"
},
{
"name": "com.icontrol.apps.clock",
"version": "1.0.0.0.3"
}
],
"module": []
},
"premiseId": null
},
"source": "INTERNAL"
}
};
var headerProperty = $scope.headerProperty = 'deviceType';
rebuildDeviceInfo(responseData);
function rebuildDeviceInfo(data) {
var deviceInfoData = responseData.account.premise;
var deviceInfo = [], deviceProperties = [];
// Parse devices
angular.forEach(deviceInfoData, function(devices, deviceKey) {
if(angular.isArray(devices)) {
deviceInfo = deviceInfo.concat(parseDevices(devices, deviceKey));
}
});
// Parse device properties
for(var i = 0; i < deviceInfo.length; i++) {
var device = deviceInfo[i];
angular.forEach(device, function(value, deviceProperty) {
if(deviceProperties.indexOf(deviceProperty) === -1) {
deviceProperties.push(deviceProperty);
}
});
}
$scope.deviceInfo = deviceInfo;
$scope.deviceProperties = deviceProperties;
}
function parseDevices(dataArray, dataKey) {
var deviceInfo = [];
if(angular.isArray(dataArray)) {
for(var i = 0; i < dataArray.length; i++) {
var data = dataArray[i];
if(data.hasOwnProperty('manufacturer') || data.hasOwnProperty('model')) {
data[headerProperty] = dataKey;
deviceInfo.push(data);
} else {
angular.forEach(data, function(devices, deviceKey) {
if(angular.isArray(devices)) {
deviceInfo = deviceInfo.concat(parseDevices(devices, deviceKey));
}
});
}
}
}
return deviceInfo;
}
});
<!DOCTYPE html>
<html ng-app="studentApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://code.angularjs.org/1.4.7/angular.js"></script>
</head>
<body ng-controller="StudentCntrl">
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Property</th>
<th ng-repeat="device in deviceInfo track by $index">{{device[headerProperty]}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="prop in deviceProperties track by $index" ng-if="prop != headerProperty">
<td>{{prop}}</td>
<td ng-repeat="device in deviceInfo track by $index">{{device[prop]}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Using AngularJS with JSON objects in arrays nested within an array, how can I get the data into the html?

I am trying to get the JSON data into list.html as follows, but my attempts are failing. I have tried following patterns described in other similar posts, but haven't had any luck and haven't found a scenario with JSON data formatted exactly like mine. How do I get the fields like givenName, familyName, primaryTitle, phones[0].value, and photo.small to show up?
index.html:
<!doctype html>
<html lang="en" ng-app="directoryApp">
<head>
<meta charset="UTF-8">
<title>Directory</title>
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular/angular-route.min.js"></script>
<script src="lib/angular/angular-animate.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div ng-view></div>
</body>
</html>
list.html:
<ul ng-show="query">
<li ng-animate="'animate'" ng-repeat="person in people.people | filter: query | orderBy: peopleOrder:direction">
<img ng-src="images/{{person.photo.small}}" alt="Photo of {{person.name.givenName}}">
<div class="info">
<h2>{{person.name.givenName}}</h2>
<h3>{{person.primaryTitle}}, {{person.phones[0].value}}</h3>
</div>
</li>
</ul>
controllers.js:
var directoryControllers = angular.module('directoryControllers', ['ngAnimate']);
directoryControllers.controller('ListController', ['$scope', '$http', function($scope, $http) {
$http.get('js/directoryData.json').success(function(data) {
$scope.people = data;
$scope.peopleOrder = 'familyName';
});
}]);
app.js:
var directoryApp = angular.module('directoryApp', [
'ngRoute',
'directoryControllers'
]);
directoryApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/list', {
templateUrl: 'partials/list.html',
controller: 'ListController'
}).
otherwise({
redirectTo: '/list'
});
}]);
directoryData.json:
[
{
"uid": 15,
"name": "School of Programming",
"sortKey": 0,
"type": "Academic",
"address": {
"address1": "255 Foo St",
"address2": "Suite 310",
"city": "FooBar",
"state": "FB",
"postalCode": "90210"
},
"phones": [
{
"type": "Work",
"value": "555-1616"
},
{
"type": "Fax",
"value": "555-3620"
}
],
"people": [
{
"uid": "person1",
"classification": "Faculty",
"name": {
"givenName": "Roo",
"nickname": "",
"additionalName": "",
"familyName": "Baf"
},
"primaryTitle": "Part Time Worker",
"phones": [
{
"type": "Work",
"value": "555-1616"
},
{
"type": "Mobile",
"value": "555-1509"
}
],
"photo": {
"small": "/__media__/photos/foo_portrait_small.jpg",
"medium": "/__media__/photos/foo_portrait_medium.jpg",
"large": "/__media__/photos/foo_portrait_large.jpg"
}
},
{
"uid": "person2",
"classification": "Faculty",
"name": {
"givenName": "Foo",
"nickname": "",
"additionalName": "P.",
"familyName": "Bar"
},
"primaryTitle": "Blah",
"phones": [
{
"type": "Work",
"value": "555-3608"
},
{
"type": "Home",
"value": "555-4716"
}
],
"photo": {
"small": "/__media__/photos/portrait_small.jpg",
"medium": "/__media__/photos/portrait_medium.jpg",
"large": "/__media__/photos/portrait_large.jpg"
}
}
]
},
{
"uid": 16,
"name": "School of Coding",
"sortKey": 1,
"type": "Academic",
"address": {
"address1": "256 Foo St",
"address2": "Suite 311",
"city": "FooBar",
"state": "FB",
"postalCode": "90210"
},
"phones": [
{
"type": "Work",
"value": "555-1616"
},
{
"type": "Fax",
"value": "555-3620"
}
],
"people": [
{
"uid": "person3",
"classification": "Faculty",
"name": {
"givenName": "Boo",
"nickname": "",
"additionalName": "",
"familyName": "Far"
},
"primaryTitle": "Part Time Worker",
"phones": [
{
"type": "Work",
"value": "555-1617"
},
{
"type": "Mobile",
"value": "555-1508"
}
],
"photo": {
"small": "/__media__/photos/fooz_portrait_small.jpg",
"medium": "/__media__/photos/fooz_portrait_medium.jpg",
"large": "/__media__/photos/fooz_portrait_large.jpg"
}
},
{
"uid": "person4",
"classification": "Faculty",
"name": {
"givenName": "Too",
"nickname": "",
"additionalName": "P.",
"familyName": "Mar"
},
"primaryTitle": "Blah",
"phones": [
{
"type": "Work",
"value": "555-3607"
},
{
"type": "Home",
"value": "555-4717"
}
],
"photo": {
"small": "/__media__/photos/Xportrait_small.jpg",
"medium": "/__media__/photos/Xportrait_medium.jpg",
"large": "/__media__/photos/Xportrait_large.jpg"
}
}
]
}
]

You have an array of objects that each have a people property in them and that property value is an array.
Thus you need to use nested ng-repeat to first loop over the main array and within each iteration of that repeat, loop over the inner array
<ul ng-repeat="item in people">
<li ng-animate="'animate'" ng-repeat="person in item.people | filter: ...">

JSON parsing and displaying in different tables using Angular JS

I'm new to Angular JS here.
can any one please help me how to parse and display the Json Data in different tables using Angular JS
[
{
"id": 0,
"isActive": false,
"balance": 1025.00,
"picture": "http://www.placekitten.com/50/50",
"age": 25,
"name": "Daisy Mcneil",
"gender": "female",
"company": "Verbus",
"email": "daisymcneil#verbus.com",
"phone": "+1 (936) 586-3983",
"address": "849 Newkirk Placez, Laurelton, Nevada, 1086",
"registered": "2012-07-15T13:46:25 +07:00",
"friends": [
{
"id": 0,
"name": "Debra Blair"
},
{
"id": 1,
"name": "Henry Avila"
},
{
"id": 2,
"name": "Jody Stark"
}
],
"service": "cherry"
},
{
"id": 1,
"isActive": true,
"balance": -2884.00,
"picture": "http://www.placekitten.com/50/50",
"age": 23,
"name": "Schroeder Atkinson",
"gender": "male",
"company": "Twiggery",
"email": "schroederatkinson#twiggery.com",
"phone": "+1 (861) 449-2254",
"address": "259 Highland Avenue, Riner, Vermont, 905",
"registered": "1998-01-17T08:16:34 +08:00",
"friends": [
{
"id": 0,
"name": "Mendoza Figueroa"
},
{
"id": 1,
"name": "Lenore Morales"
},
{
"id": 2,
"name": "Winifred Bowen"
}
],
"service": "lemon"
}
]
I want to display each JSON object in the different table with a buttion which toggles the table in the html.
the above is the JSON data available...
thanks in advance.
The skeleton for the code is available here https://github.com/50Cubes/WebappTest

This is the code for index.html file -
<!doctype html>
<html>
<head>
<title>Page Title</title>
<script src="main.js"></script>
</head>
<body>
<div ng-app="MyApp">
<div ng-controller="ViewJson">
<table>
<th>
<td>id</td>
<td>isActive</td>
<td>balance</td>
<td>picture</td>
<td>age</td>
<td>name</td>
<td>gender</td>
<td>company</td>
<td>email</td>
<td>phone</td>
<td>address</td>
<td>registered</td>
<td>service</td></th>
<tr ng-repeat="post in posts">
<td>{{post.id}}</td>
<td>{{post.isActive}}</td>
<td>{{post.balance}}</td>
<td>{{post.picture}}</td>
<td>{{post.age}}</td>
<td>{{post.name}}</td>
<td>{{post.gender}}</td>
<td>{{post.company}}</td>
<td>{{post.email}}</td>
<td>{{post.phone}}</td>
<td>{{post.address}}</td>
<td>{{post.registered}}</td>
<td>{{post.service}}</td></tr></table>
</div>
</div>
</body>
</html>
This is the code for main.js file. Here I am assuming that the name of json file is posts.js -
var app=angular.module('MyApp',[]);
function ViewJson($scope, $http)
{$http({method: 'POST', url: 'js/posts.json'}).success(function(data)
{$scope.posts = data;});
}