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>

Show JSON Data in Jquery Datatables

I've been trying to get my JSON data in jQuery DataTables component.
First I wrote the JavaScript code as well as a view as shown in the code below:
$(document).ready(function () {
$('#myData').DataTable({
lengthChange: false,
ajax: {
url: "http://amp-local/api/wipbin/FetchChild/",
// dataSrc: 'allk'
},
columns: [
{ data: "name" },
{ data: "numbers" }
],
select: true
});
});
My view:
<table id="myData" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Numbers</th>
</tr>
</thead>
</table>
My JSON:
[{
"numbers": "38",
"name": "Bllaca"
}, {
"numbers": "28",
"name": "Kaess"
}, {
"numbers": "27",
"name": "droessmer"
}, {
"numbers": "24",
"name": "friedricha"
}]
Result is with this error:
TypeError: undefined is not an object (evaluating 'f.length')
And my table is empty.

When using server-side processing with AJAX requests, it expects JSON data to be returned in the special format required by DataTables. The following fields of JSON response object are required: draw, data, recordsTotal and recordsFiltered. You need to bring your server response into accordance with expected format.
For example, your first response should be as following:
{
"draw": 1,
"recordsTotal": 4,
"recordsFiltered": 4,
"data": [
{
"numbers": "38",
"name": "Bllaca"
}, {
"numbers": "28",
"name": "Kaess"
}, {
"numbers": "27",
"name": "droessmer"
}, {
"numbers": "24",
"name": "friedricha"
}
]
}

Ng-repeat of json data in Angular

I'm using Angular JS to retrieve some data with JSON. With these data I will build some panels, one for each object.
I have a list of customers, and each customers has a specific name and color:
$scope.customers = [{
"samsung": [
{ "color": "#fcd5b4", "logo": 'img/samsug.png' },
],
"htc": [
{ "color": "#ff66ff", "logo": 'img/htc.png' },
],
"hp": [
{ "color": "#acd5b4", "logo": 'img/hp.png' },
]
}];
In the HTML I should write:
<div ng-repeat="customer in customers" style="background-color: {{customer.samsung.color}}">
<table><tbody>
<tr><td class="logo">
<img src="{{customer.samsung.logo}}">
</td></tr>
</tbody></table>
But later I will not know the names of customers.
How can I repeat all elements without knowing the name of customers?

There is a way to get (key,value) pair in ng-repeat. I hope and thought this is exactly match your context. You have some array confusion in your code what should be repeat in the html part.
Script - you missed flower brace in the end
$scope.customers = [
{
"samsung": [
{
"color": "#fcd5b4", "logo": 'img/samsug.png', "numbers":[{"number": 123}, {"number": 938103}, {"number": 93810}]
},
],
"htc": [
{
"color": "#ff66ff", "logo": 'img/htc.png' ,"numbers":[{"number": 6341}, {"number": 345134}, {"number": 345134}]
},
],
"hp": [
{
"color": "#acd5b4", "logo": 'img/hp.png' ,"numbers":[{"number": 1346}, {"number": 613461}, {"number": 77134}]
},
]
}
];
And your code be
<div ng-repeat="(key,value) in customers[0]" style="background-color: {{value[0].color}}">
<table>
<tbody>
<tr>
<td class="logo">
<img ng-src="{{value[0].logo}}">
<ul>
<li ng-repeat="(keynum, valuenum) in value[0].numbers">{{valuenum.number}}</li>
</ul>
</td></tr>
</tbody></table>
Fiddle

style="background-color: {{customer.color}}"
and
<img ng-src="{{customer.logo}}">
this should do it.
Your customer is the current element of your array...

AngularJS - Calculating length of JSON array

I have a set of JSON data and within it, i am trying to calculate the length of an array (Infos):
My JSON:
"Association": {
"Items": [
{
"AssocName": {
"SurName": "BLOGGS",
"Title": "MR",
"ForeName": "HAPPY"
},
"Details": [
{
"Name": {
"SurName": "BLOGGS",
"Title": "MR",
"ForeName": "HAPPY"
},
"Infos": [
{
//Some Data
//Some Data
//Some Data
},
{
//Some Data
//Some Data
//Some Data
},
{
//Some Data
//Some Data
//Some Data
},
{
//Some Data
//Some Data
//Some Data
}
]
}
]
},
{
"AssocName": {
"SurName": "BLOGGS",
"Title": "MRS",
"ForeName": "BLUE"
},
"Details": [
{
"Name": {
"SurName": "BLOGGS",
"Title": "MRS",
"ForeName": "BLUE"
},
"Infos": [
{
//Some Data
//Some Data
//Some Data
},
{
//Some Data
//Some Data
//Some Data
}
]
}
]
}
]
}
My HTML:
<tr ng-repeat-start="associations in Association.Items track by $index">
<td>
{[{associations.AssocName.Title}]}
{[{associations.AssocName.ForeName}]}
{[{associations.AssocName.SurName}]}
</td>
<td>
{[{ associations[$index].Details.Infos.length }]} of Details
</td>
</tr>
But no valus seems to be displayed... The Title, Forename and Surname are displaying as expected.

Just try out this way as shown below
Working Demo
<table>
<tr ng-repeat="associations in Association.Items">
<td>
{{associations.AssocName.Title}}
{{associations.AssocName.ForeName}}
{{associations.AssocName.SurName}}
</td>
<td>
[{{associations.Details[0].Infos.length}}] of Details
</td>
</tr>
</table>

You don't need index
<tr ng-repeat-start="associations in Association.Items">
<td>
{[{associations.AssocName.Title}]}
{[{associations.AssocName.ForeName}]}
{[{associations.AssocName.SurName}]}
</td>
<td>
{[{ associations.Details.Infos.length }]} of Details
</td>
</tr>