Develop Reference

Group table cells by decimal points

Group the table cells based on the decimal points.
Plunker
Sample JSON:
[
{
"data1": [
{
"name": "Download",
"id": "1.1.1"
},
{
"name": "Download",
"id": "1.1.2"
},
{
"name": "Download",
"id": "1.2"
},
{
"name": "Download",
"id": "1.3"
},
{
"name": "Download",
"id": "1.4"
}
]
},
{
"data2": [
{
"name": "Download",
"id": "2.1"
},
{
"name": "Download",
"id": "2.2"
}
]
},
{
"data3": [
{
"name": "Download",
"id": "3.1.1"
},
{
"name": "Download",
"id": "3.1.2"
},
{
"name": "Download",
"id": "3.2"
}
]
},
{
"data4": [
{
"name": "Download",
"id": "4.1.1"
},
{
"name": "Download",
"id": "4.1.2"
}
]
}
]
HTML:
<table border="0" class="table table-bordered">
<tbody ng-repeat="(key,result) in results">
<tr ng-repeat="r in result['data'+[key+1]]">
<td rowspan="5">{{r.id}}</td>
</tr>
</tbody>
</table>
using ng-repeat to display each id in single cell of the table.
Actual Result:
Expected Result
Because of ng-repeat the cell are displaying next to each other. The expected result is to divide the table cell using the decimal points.
Example:
Row1 => 1.1.1, 1.1.2, 1.2, 1.3, 1.4
Row2 => 2.1, 2.2
The Row2 first cell(2.1) should take the width of row1(1.1.1 and 1.1.2). And 2.2 should take the rest of the width of 1.2, 1.3 and 1.4
Thanks in advance.

your data structure not clear, seems need to review and refactor it.
but for now this plunker can help you. (i hope!)
link:
plunker

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>

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>

Angular JS: How to use ng-repeat for complex objet

I have a complex object coming from the web service as shown below, how to display PatientId and description, if anyone have any good idea, please help me thru it.:
$scope.myData = {"PatientSearchResponse": {
"pageNumber": 1,
"pageSize": 50,
"patDataBean": [
{
"gender": {
"code": "male",
"description": "Male",
"type": "gender"
},
"patDateofBirth": "1997/06/19",
"patFirstName": "aman",
"patLastName": "elvis",
"patSurvivalStat": {
"code": "A",
"description": "Alive",
"type": "patient_status"
},
"patientIdentifier": {
"OID": "589a9cf6-4513-49e1-bd5c-c7363849ed93",
"organizationId": {
"PK": 54,
"siteName": "CTRP"
},
"patientId": "1"
}
},
{
"gender": {
"code": "male",
"description": "Male",
"type": "gender"
},
"patDateofBirth": "2001/07/18",
"patFirstName": "Elvis",
"patLastName": "Harvey",
"patSurvivalStat": {
"code": "dead",
"description": "Dead",
"type": "patient_status"
},
"patientIdentifier": {
"OID": "151d0222-3726-40ee-8f69-0a6800727607",
"organizationId": {
"OID": "83d09227-9c65-4d7b-94da-baaf5c07b38a",
"siteName": "Texas"
},
"patientId": "100"
}
}]}}
In my HTML I am using ng-repeat as:
<td ng-repeat="(key, value) in grid.columns">
<div>
<p >{{row[key]}}</p>
</div>
</td>
my JS file as:
myDataContainer = $scope.myData.PatientSearchResponse.patDataBean;
$scope.grid.columns = {patientIdentifier: "Patient Id",patFirstName: "First Name",patLastName: "Last Name",patDateofBirth: "Date of Birth",patSurvivalStat: "Description"};
angular.forEach(myDataContainer, function (values, index) {
$scope.grid.rows.push(values);
});

Why you can just do this :
<td ng-repeat="pat in myData.PatientSearchResponse.patDataBean">
{{pat.patientIdentifier}} - {{pat.patSurvivalStat.description}}
</td>

Try this man:
angular.module('app', [])
.controller('Controller', ['$scope', function($scope) {
$scope.myData = {"PatientSearchResponse": {
"pageNumber": 1,
"pageSize": 50,
"patDataBean": [
{
"gender": {
"code": "male",
"description": "Male",
"type": "gender"
},
"patDateofBirth": "1997/06/19",
"patFirstName": "aman",
"patLastName": "elvis",
"patSurvivalStat": {
"code": "A",
"description": "Alive",
"type": "patient_status"
},
"patientIdentifier": {
"OID": "589a9cf6-4513-49e1-bd5c-c7363849ed93",
"organizationId": {
"PK": 54,
"siteName": "CTRP"
},
"patientId": "1"
}
},
{
"gender": {
"code": "male",
"description": "Male",
"type": "gender"
},
"patDateofBirth": "2001/07/18",
"patFirstName": "Elvis",
"patLastName": "Harvey",
"patSurvivalStat": {
"code": "dead",
"description": "Dead",
"type": "patient_status"
},
"patientIdentifier": {
"OID": "151d0222-3726-40ee-8f69-0a6800727607",
"organizationId": {
"OID": "83d09227-9c65-4d7b-94da-baaf5c07b38a",
"siteName": "Texas"
},
"patientId": "100"
}
}]}}
}]);
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="Controller">
<table>
<tr>
<th>Id</th>
<th>Description</th>
</tr>
<tr ng-repeat="m in myData.PatientSearchResponse.patDataBean">
<td>{{m.patientIdentifier.patientId}}</td>
<td>{{m.patSurvivalStat.description}}</td>
</tr>
</table>
</body>
</html>

Would be more practical to make columns an array of objects with standardized keys
$scope.grid.columns = [
{property : 'patientIdentifier', heading : "Patient Id"},
{property : 'patFirstName', heading : "First Name"},
{property : 'patLastName', heading : "Last Name"},
{property : 'patDateofBirth', heading : "Date of Birth"},
{property : 'patSurvivalStat', heading : "Description"}
]
Then use those to set both headings and content
<table>
<thead>
<tr>
<th ng-repeat="col in grid.columns">{{::col.heading}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in myData.patDataBean">
<td ng-repeat="col in grid.columns">{{::item[col.property]}}</td>
</tr>
</tbody>
</table>

Nesting each in handlerbar

I am having an issue with this handlebar-template:
<div id="shifts" style="visibility:hidden">
{{#sites}}
<div>{{name}}</div>
{{#groups}}
<div>{{name}}</div>
<table>
<thead>
<tr>
{{#users}}
<th class='username' data-userID='{{id}}'>{{name}}</th>
{{/users}}
</tr>
</thead>
<tbody>
{{#shifts}}
<tr>
<td>{{time}}</td>
{{#individuals}}
<td class='vuorot_tyhja' id='{{id}}'>{{name}}</td>
{{/individuals}}
</tr>
{{/shifts}}
</tbody>
</table>
{{/groups}}
{{/sites}}
</div>
During testing it seems that the table actually causes the problem. If I add table, tr ,td, th tags (or others) inside the handlebars, it won't generate the output for those. So basically in this case only the #sites and #groups are shown. If I change the layout so that even sites and groups are within the table, then even those don't show up.
So the data is shown without problems if I remove the styling or ie. use div.
The test-data (if needed) is as follows:
var data = {
"sites": [{
"name": "Site",
"groups": [{
"name": "Ryhmä 1",
"users": [{
"name": "Name1",
"id": 1
},{
"name": "Name2",
"id": 2
},{
"name": "Name3",
"id": 3
},{
"name": "Name4",
"id": 4
},{
"name": "Name5",
"id": 5
}],
"vuorot": [{
"time": "Ke 01.01.14",
"individuals": [{
"id": 1,
"name": "aamu"
},{
"id": 2,
"name": "aamu"
},{
"id": 3,
"name": "aamu"
},{
"id": 4,
"name": "aamu"
},{
"id": 5,
"name": "aamu"
},{
"id": 6,
"shift": "aamu"
},{
"id": 13,
"name": "aamu"
}]
}]
}]
}]
};
What am I missing?

Ok. I found the answer from earlier posts: Handlebars does not fill table
So case mostly solved. The problem fits totally the description, so with that I can debug it.