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>

ng-repeat with the nested json array of objects in AngularJs

I have a nested json array of objects as below. I wanted to parse so that I can read using ng-repeat and display in the html table. In the table, names will become headers and values become cells in each row. can you please help me as how to do this in angularjs ?
[
{
"records":
[
{
"cells": [
{"id": "102", "value": "John"},
{"id": "101", "value": "222"},
{"id": "103", "value": "600987"}
]
},
{
"cells": [
{"id": "103", "value": "69987"},
{"id": "101", "value": "999"},
{"id": "102", "value": "Susan"}
]
}
],
"headers": [
{
"id": "101",
"name": "emp_id"
},
{
"id": "102",
"name": "emp_name"
},
{
"id": "103",
"name": "emp_salary"
}
]
}
]

Here is your table should be like this:
<table>
<tr>
<th ng-repeat="h in list[0].headers">{{h.name}}</th>
</tr>
<tr ng-repeat="record in list[0].records">
<th ng-repeat="cell in record.cells">{{cell.value}}</th>
</tr>
</table>
See a working plunkr https://plnkr.co/edit/MyUaovStvxj58RIy0CW7?p=preview
Update:
And you can use orderBy with ng-repeat as davidkonrad mentioned:
<table>
<tr>
<th ng-repeat="h in list[0].headers | orderBy: 'id'">{{h.name}}</th>
</tr>
<tr ng-repeat="record in list[0].records">
<th ng-repeat="cell in record.cells | orderBy: 'id'">{{cell.value}}</th>
</tr>
</table>

Adding something extra to Joe's answer. If you are planning to get the data from a separate JSON file, you can use the following code in your .js file.
(function () {
'use strict';
angular.module('plunker', [])
.controller('MainCtrl', MainCtrl);
MainCtrl.$inject = ['$scope', '$http'];
function MainCtrl($scope, $http) {
$http.get('[path to your JSON file]/data.json').success(function (data) {
$scope.list= data;
});
}
})();

Rendering Limited Number of Object in Mustache.js

I am GETing a nested JSON object that I want to render on a HTML page. The length and content of the object can vary and I want to show a part of it. I do not know how to do it using Mustache.js
My object looks like this:
{ "success": [
{
"stopID": "123",
"stopName": "ABC",
"lines": [
{
"lineRef": "3",
"destinationID": "987",
"destinationName": "DEF",
"arrivals": [
1490279520000,
1490279460000,
1490280180000
]
}
]
},
{
"stopID": "331",
"stopName": "TVC",
"lines": [
{
"lineRef": "3",
"destinationID": "128",
"destinationName": "NJH",
"arrivals": [
1490279160000,
1490280180000
]
},
{
"lineRef": "3V",
"destinationID": "361",
"destinationName": "KOI",
"arrivals": [
1490280360000
]
}
]
},
{
"stopID": "3601",
"stopName": "LKG",
"lines": [
{
"lineRef": "3",
"destinationID": "128",
"destinationName": "ABC",
"arrivals": [
1490279040000,
1490280360000,
1490280180000,
1490280180000
]
}
]
}
]}
I want to display maximum of two arrivals, how can I put a limit there.
I found this but it is not much help. My code is like this:
<script id="#timetables" type="text/template">
{{#success}}
<tr style = "">
<th colspan="3" style="padding-left:25px;">{{stopName}}<span><sup style="padding-left:5px;font-weight:100"><small>{{stopID}}</sup></span></th>
</tr>
{{#lines}}
<tr class="line-row">
<td class="" style="border:none;width:10%;">{{lineRef}}</td>
<td class="" style="border:none;width:30%;">{{destinationName}}</td>
<td class="" style="border:none;width:60%;">{{arrivals}}</td>
</tr>
{{/lines}}
{{/success}}
</script>

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>

Warning: Requested unknown parameter '0' for row 0

I have the following code:
var dummyData = {
"activities": [
{ "date": "19/06/2015 19:00", "user": "Dan", "display": "First Item" },
{ "date": "19/06/2015 19:00", "user": "Andrew", "display": "Second Item" },
{ "date": "19/06/2015 19:00", "user": "Trevor", "display": "Third Item" },
{ "date": "19/06/2015 19:00", "user": "Bob", "display": "Fourth Item" }
]
};
$("#sysActTable").dataTable({
"data": dummyData.activities,
});
I have tried several variations but I am always getting the error that points to this page. My HTML is as follows:
<table id="sysActTable" class="table table-hover" style="margin-bottom:0px">
<thead>
<tr>
<th style="width:20%">Date</th>
<th style="width:30%">User</th>
<th style="width:50%">Display</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width:20%"></td>
<td style="width:30%"></td>
<td style="width:50%"></td>
</tr>
</tbody>
again I have tried a number of varieties. Why am I getting this error below?
DataTables warning: table id=sysActTable - Requested unknown parameter '0' for row 0

The problem is that your data is an array of objects. By default, DataTables expects data to be an array of arrays.
You need to use columns.data option to describe your data structure.
$("#sysActTable").dataTable({
"data": dummyData.activities,
"columns": [
{ "data": "date" },
{ "data": "user" },
{ "data": "display" }
]
});