I have v-datatable using vuetify I want to get nested data to be displayed unfortunately I can't get the nested object value this is my code
<template slot="items" slot-scope="props">
<tr #click="rowClick(props.item.name)">
<td
class="text-xs-right"
>{{ props.item.firstName + props.item.middleName + props.item.lastName}}</td>
<td class="text-xs-right">{{ props.item.gender }}</td>
<td class="text-xs-right">{{ props.item.dateOfBirth }}</td>
<td class="text-xs-right">{{ props.item }}</td>
</tr>
</template>
and this is the header
headers: [
{
text: "MCN",
align: "left",
sortable: false,
value: "medicalRecordNumber",
width: "16%"
},
{ text: "Full Name", value: "fullName", width: "16%" },
{ text: "Gender", value: "gender", width: "16%" },
{ text: "Date Of Birth", value: "dateOfBirth", width: "16%" },
{ text: "Phone Number", value: "address", width: "16%" },
{ text: "Actions", value: "action", sortable: false }
],
and my data
{
"medicalRecordNumber": "dsUlBnusoH",
"fullName": "Rozella SchusterProf. Chloe Hauck DDSAthena Hill III",
"firstName": "Rozella Schuster",
"middleName": "Prof. Chloe Hauck DDS",
"lastName": "Athena Hill III",
"gender": "Female",
"dateOfBirth": "2018-04-18",
"language": "Tigregna",
"religion": "Catholic",
"address": {
"region": "Addis Ababa",
"woreda": "bole",
"kebele": "10",
"houseNumber": "35698",
"telPhoneNumber": null,
"mobilePhoneNumber": null
},
"emergencyContact": {
"firstName": "Krista Collins III",
"middleName": "Onie Roob",
"lastName": "Dr. Vivien Miller PhD",
"emergencyContactAddress": null
}
}
i got the values but not the nested one it displays [object Object]
replace
{ text: "Phone Number", value: "address", width: "16%" },
to
{ text: "Phone Number", value: "address.telPhoneNumber", width: "16%" },
#Ktertz You just need to create a custom v-solt template with a v-for loop for every object.
Upadate: #Ktertz deleted his question, I will leave my answer here, maybe it will help someone else.
His question was related to nested objects.
It was just displaying [object Object] (Same as OP Question).
He had a list of objects like:
engines: [
{
id: 1,
name: "V8",
modules: [
{
id: 1,
moduleName: "Comp"
},
{
id: 2,
moduleName: "Enip"
},
]
}
]
My working solution was to just create a custom v-solt template with a v-for loop for every object:
headers:
{
sortable:true,
text:'Modules Formation',
value:'modules',
align:'right'
},
Now place this snipped inside your v-data-table:
<template v-slot:[`item.modules`]="{ item }">
<div v-for="module in item.modules" :key="module.id">
{{ module.moduleName }}
</div>
</template>
Related
I want to add count course.length from api to each item option on v-select and show data to active based filter.
For example : Items in v-select contains options all(count), passed(count) which filtered from online.passed, not complete(count)
which filtered from online.complete, etc.
vue.js template :
<template>
<v-select
v-model="filter"
:items="items"
></v-select>
<v-card v-for="online in onlineCourse" :key="online.id">
<v-card-title>{{online.title}</v-card-title>
<p v-if="online.complete === 100">{{online.complete}}%</p>
<p v-else-if="online.complete < 100 && online.complete > 0">{{online.complete}}%</p>
<p v-else>{{online.complete}}%</p>
</v-card>
</template>
<script>
data () {
return {
onlineCourse: [],
filter: 'All',
items: [
'All',
'passed',
'not complete',
],
}
}
method: {
async getDataOnline () {
try {
const request = await Axios.get('v1/courses')
this.onlineCourse = request.courses
} catch (error) {
console.log(error.message);
}
}
}
</script>
Response JSON :
"courses": [
{
"id": 1,
"title": "title1",
"passed": false,
"completed": 0
},
{
"id": 2,
"title": "title2",
"passed": true,
"completed": 100
},
{
"id": 3,
"title": "title3",
"passed": false,
"completed": 50
}
],
Few Observations in current code you posted :
You are checking for online.complete === 100 but you don't have complete property in online object. Hence, corrected that to completed instead of complete.
closing braces is missing from online.title expression.
Now coming to the original problem :
To achieve the counts in the v-select options. You have to convert your items array from array of elements to array of objects.
items: ['All', 'passed', 'not complete']
to
items: [{
name: 'All',
count: this.onlineCourse.length
}, {
name: 'passed',
count: this.onlineCourse.filter((course) => course.passed)
}, {
name: 'not complete',
count: this.onlineCourse.filter((course) => course.completed === 0)
}]
I have two dropdowns - where each dropdown should filter an objects key. The dropdowns should not exclude each other, or both values from dropdown should work indenpentedly from each other (ie both dropdown values does not need to be true for filtering).
When I select an item from the dropdown, I get one array with two objects, for each dropdown:
[
{
"name": "Type",
"value": [
"calibration"
],
"selected": [
{
"text": "calibration"
}
]
},
{
"name": "Function group",
"value": [
"1 - Test",
"2 - Programming"
],
"selected": [
{
"text": "1 - Test"
}
]
}
]
Above shows two objects, for the two different dropdowns - one with name "type" and one with "Function group".
The "value" in the object above is all of the dropdown items.
"selected" holds the selected item from the dropdown and the filtering should be based on that.In this case we have selected "calibration" and "Test".
The "type" dropdown should filter on the data "category" field while the "function group" should filter on "groupDescription" field. The data that needs to be filtered based on the mentioned keyes and selected values looks like this:
const mockData = [
{
operationDetails: {
id: '5119-03-03-05',
number: '41126-3',
description: 'Clutch wear, check. VCADS Pro operation',
category: 'calibration', //type dropdown
languageCode: 'en',
countryCode: 'GB'
},
functionDetails: {
groupId: 411,
groupDescription: 'Test', //function group dropdown
languageCode: '',
countryCode: ''
},
lastPerformed: '2021-02-22',
time: 20,
isFavorite: false
}
,
{
operationDetails: {
id: '5229-03-03-05',
number: '41126-3',
description: 'Defective brake pad',
category: 'calibration', ///type dropdown
languageCode: 'en',
countryCode: 'GB'
},
functionDetails: {
groupId: 411,
groupDescription: 'Programming', //function group dropdown
languageCode: '',
countryCode: ''
},
lastPerformed: '2020-01-22',
time: 20,
isFavorite: false
}
]
Playground with mock data and response example from dropdown here.
How to filter the data based on the values from the dropdown objects, for each key its responsible for?
It's not the prettiest code, but it does work. The one thing that you'd want to watch out for is the regex. It would be better to not have to parse and do a straight match like category, but if your cases are static then you should be able to figure out if this will work every time. It would also be nice to have a field key in filterDetails so you know which field to try to match in the actual data and you could program that in.
const filterDetails = [
{
name: "Type",
value: ["calibration"],
selected: [
{
text: "calibration",
},
],
},
{
name: "Function group",
value: ["1 - Test", "2 - Programming"],
selected: [
{
text: "Test",
},
],
},
];
const mockData = [
{
operationDetails: {
id: "5119-03-03-05",
number: "41126-3",
description: "Clutch wear, check. VCADS Pro operation",
category: "calibration", //type
languageCode: "en",
countryCode: "GB",
},
functionDetails: {
groupId: 411,
groupDescription: "Test", //function group
languageCode: "",
countryCode: "",
},
lastPerformed: "2021-02-22",
time: 20,
isFavorite: false,
},
{
operationDetails: {
id: "5229-03-03-05",
number: "41126-3",
description: "Defective brake pad",
category: "calibration", ///type
languageCode: "en",
countryCode: "GB",
},
functionDetails: {
groupId: 411,
groupDescription: "Programming", //function group
languageCode: "",
countryCode: "",
},
lastPerformed: "2020-01-22",
time: 20,
isFavorite: false,
},
];
console.log(
"filtered mockData: ",
mockData.filter(({ operationDetails, functionDetails }) => {
let groupDescriptionMatch = false;
let categoryMatch = false;
for (const details of filterDetails) {
if (
details.name === "Type" &&
details.selected[0].text === operationDetails.category
)
categoryMatch = true;
if (details.name === "Function group") {
let parsedGroup = details.selected[0].text.match(/[a-zA-Z]+/g);
if (parsedGroup[0] === functionDetails.groupDescription) {
groupDescriptionMatch = true;
}
}
}
return groupDescriptionMatch && categoryMatch;
})
);
I'm new to angular and I have a page that will be using dtable. The table will be built in my controller but for the time being I want to add some hardcode rows until I am ready to populate my table with valid details but I have no idea how to do this.
HTML
<dtable class="full-height material"
style="height: 555px"
options="vm.tableoptions"
rows="vm.adviseraccess">
</dtable>
Controller
var vm = this;
vm.tableoptions =
{
rowHeight: 50,
headerHeight: 30,
footerHeight: 50,
columnMode: 'force',
columns:
[
{
name: "Adviser Name",
width: 75
},
{
name: "Allow Access",
width: 25
}
],
};
I tried seeing if adding items to my tableoptions would work as shown below but it doesn't
vm.tableoptions =
{
rowHeight: 50,
headerHeight: 30,
footerHeight: 50,
columnMode: 'force',
columns:
[
{
name: "Adviser Name",
width: 75
},
{
name: "Allow Access",
width: 25
}
],
items:
[
{
"name": "One"
}
{
"name": "Two"
}
]
};
And I also tried the following
vm.adviseraccess = [
{
name: "Antony"
},
{
name: "Bob"
},
{
name: "Will"
}
];
Try Like This
<div ng-controller="AngularWayCtrl as showCase">
<table datatable="ng" class="row-border hover">
<thead>
<tr>
<th>ID</th>
<th>FirstName</th>
<th>LastName</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in showCase.persons">
<td>{{ person.id }}</td>
<td>{{ person.firstName }}</td>
<td>{{ person.lastName }}</td>
</tr>
</tbody>
</table>
</div>
Controller
angular.module('showcase.angularWay', ['datatables', 'ngResource'])
.controller('AngularWayCtrl', AngularWayCtrl);
function AngularWayCtrl($resource) {
var vm = this;
vm.persons=[{
"id": 860,
"firstName": "Superman",
"lastName": "Yoda"
}, {
"id": 870,
"firstName": "Foo",
"lastName": "Whateveryournameis"
}, {
"id": 590,
"firstName": "Toto",
"lastName": "Titi"
}, {
"id": 803,
"firstName": "Luke",
"lastName": "Kyle"
}];
}
for more Details please Refer this Link Angular-dataTables
Trying to put an array i've formatted into kendo UI Grid. This is the code I'm using.
$(document).ready(function (){
$("#grid").kendoGrid({
columns: [
{ title: "Ticket Number", field: "0" },
{ title: "Title", field: "1" },
{ title: "Created On", field: "2" },
{ title: "Modified On", field: "3" },
{ title: "Queue", field: "4" },
{ title: "Status", field: "5" },
{ title: "Account", field: "6" },
{ title: "Contact", field: "7" },
{ title: "Service Type", field: "8" },
{ title: "Issue Type", field: "9" }
],
dataSource: dataset
});
});
the variable dataset contains a list of columns and rows with the data I wish to display. When Running the code I get:
Uncaught Error: Invalid template:'<tr data-uid="#=data.uid#" role='row'>
I'm not sure what I'm doing wrong. The data in the array is in the correct order, and the columns are rendering on the page. but it dosen't seem to want to insert my data.
The reason for the "Invalid template" error is that it looks like you're trying to set the columns' fields by index, e.g.:
field: "0"
You're actually parsing strings here, though. Rather, you should provide the actual field names from your dataset:
<script>
$(function (){
var dataset = [
{ ticketId: "1000", title: "Lorem" },
{ ticketId: "1001", title: "Ipsum" }
];
$("#grid").kendoGrid({
columns: [
{ title: "Ticket Number", field: "ticketId" },
{ title: "Title", field: "title" }
],
dataSource: dataset
});
});
</script>
Here's a working sample.
That will probably work, but without an exacte sample of your dataset there is nothing further to assist with.
My JSON object and observablarray are like :
self.myComplexsObject= ko.observableArray([{
"TupleArray": [{
"OptInfo": {
"Version": "B",
"Name": "csk_profile"
},
"Parameter": [{
"Value": "1",
"Name":"min SampleCopunt"
}]
},
{
"OptInfo": {
"Version": "A",
"Name": "Dml_profile"
},
"Parameter": [{
"Value": "2",
"Name":"min SampleCopunt"
}]
}]
}]);
and I want to access to Name and Version like below: But its not working Could you please help me??
<div data-bind='template: { foreach: myComplexsObject,
beforeRemove: hideElement,
afterAdd: showElement }'>
<div data-bind="foreach: OptInfo">
<div data-bind='attr: { "class": "complexObject" + Name,"title":Name},
text: Version'></div>
</div>
</div>
You can't access "OptInfo" this way because of the structure of your JSON. You are passing an array of one object to the observableArray. Here is the structure of this object:
{
"TupleArray":[
{
"OptInfo":{
"Version":"B",
"Name":"csk_profile"
},
"Parameter":[
{
"Value":"1",
"Name":"min SampleCopunt"
}
]
},
{
"OptInfo":{
"Version":"A",
"Name":"Dml_profile"
},
"Parameter":[
{
"Value":"2",
"Name":"min SampleCopunt"
}
]
}
]
}
So, this object, which becomes the context in your for each loop does not have a "OptInfo" property. The object only contains an array of two objects ("TupleArray").