I have following data
vm.myData =
{
'Type' :
[
'A',
'B',
'C'
],
'Data': [
{
'Key': 'XXX',
'AValues':
{
'ID': '1',
'Val': '10'
},
'BValues':
{
'ID': '2',
'Val': '20'
},
'CValues':
{
'ID': '2',
'Val': '20'
}
},
{
'Key': 'TTT',
'AValues':
{
'ID': '2',
'Val': '30'
},
'BValues':
{
'ID': '4',
'Val': '70'
},
'CValues':
{
'ID': '2',
'Val': '20'
}
}
]
};
I am trying to show data as below
Key A B C
XXX 10 20 20
TTT 30 70 20
I tried it many ways but not able to get desired result.
I want the name of the Columns to come from 'Type' on 'myData'.
I am able to display first row by hardcoding.
vm.gridOptions = {
columnDefs: [
{ name: 'Key', field: 'Data[0].Key'},
{ name: 'A', field: 'Data[0].AValues.Val'},
{ name: 'B', field: 'Data[0].BValues.Val'},
{ name: 'C', field: 'Data[0].CValues.Val'}
],
data: vm.myData
};
I would really appreciate any help.
Update
After going through Naren Mulrali's suggestion, I did following which gives me desired result.
But I have hardcoded column names(I need different display names).
Is there a way to dynamically get column header from the 'Type' array from 'myData'
vm.gridOptions = {
columnDefs: [
{ displayName: 'Key', name: 'Key' },
{ displayName: 'A', name: 'AValues.Val' },
{ displayName: 'B', name: 'BValues.Val' },
{ displayName: 'C', name: 'CValues.Val' }
],
data: vm.myData.Data
};
You need to convert your Object into a format that angular ui grid understands, please refer to the below JSFiddle
angular.forEach($scope.myData.Data, function(value, index){
value.AValues = value.AValues.Val;
value.BValues = value.BValues.Val;
value.CValues = value.CValues.Val;
$scope.myData.Data[index] = value;
});
JSFiddle: link
Related
I have the following nested object:
export const mockData = {
sections: [
{
name: 'Client',
subSections: [
{
name: 'Client Detail'
}
]
},
{
name: 'Sales',
subSections: [
{
name: 'Overview',
subSections: [
{
name: 'Overview - A',
fields: [
{
key: 'firmName',
type: 'input',
templateOptions: {
label: 'Firm Name',
required: true
}
},
{
key: 'requestOption',
type: 'select',
templateOptions: {
label: 'Request Option',
required: true,
options: [
{ value: '1', label: '1' },
{ value: '2', label: '2' },
{ value: '3', label: '3' },
{ value: '4', label: '4' }
]
}
},
{
key: 'region',
type: 'select',
templateOptions: {
label: 'Region',
required: true,
options: [
{ value: '1', label: '1' },
{ value: '2', label: '2' },
{ value: '3', label: '3' },
{ value: '4', label: '4' },
{ value: '5', label: '5' }
]
}
}
]
}
]
}
]
}
]
};
and I would like to access the array from the fields property in order to render a form. Right now what I have is overviewA: FormlyFieldConfig[] = mockData.sections[1].subSections[0].subSections[0].fields, but I am facing the error of
Property 'subSections' does not exist on type '{ name: string; }'.
However, this error goes away when do a work-around and I add the property subSections to the nested object like so:
export const mockData = {
sections: [
{
name: 'Client',
subSections: [
{
name: 'Client Detail',
subSections: []
}
]
},
{
name: 'Sales',
subSections: [
{
name: 'Overview',
subSections: [
{
name: 'Overview - A', ...
I was wondering why
I was facing the issue without the work-around, and
How can I access the array from the property fields without the work-around?
I have 2 javascript arrays which are a, b and I want to remove the common elements from the array a.
Can you please help on this.
var a = [{
name: 'java',
id: '1'
},
{
name: 'php',
id: '2'
},
{
name: 'ruby',
id: '3'
},
{
name: 'phyton',
id: '4'
}
];
var b = [{
name: 'java',
id: '1'
},
{
name: 'php',
id: '2'
}
];
It's basically a simple filter operation. I'd take the ids from b into an array, then filter by those elements
var a = [{
name: 'java',
id: '1'
},
{
name: 'php',
id: '2'
},
{
name: 'ruby',
id: '3'
},
{
name: 'phyton',
id: '4'
}
];
var b = [{
name: 'java',
id: '1'
},
{
name: 'php',
id: '2'
}
];
const exists = b.map(e => e.id);
const res = a.filter(e => !exists.includes(e.id));
console.log(res);
I have a requirement that to filter the arrays of objects based on the value entered in input fields.
Data
data: [{
taskname: 'Test1',
taskId: '1',
status: 'Submitted'
}, {
taskname: 'Test2',
taskId: '2',
status: 'Resolved'
}, {
taskname: 'Test3',
taskId: '4',
status: 'Submitted'
}, {
taskname: 'Test4',
taskId: '5',
status: 'In Progress'
}, {
taskname: 'Test5',
taskId: '6',
status: 'Resolved'
}, {
taskname: 'Test6',
taskId: '7',
status: 'Submitted'
}
}]
in the input field, while entering
R
Then i have filter data based on status value with "R"
Respected o/p
data: [{
taskname: 'Test2',
taskId: '2',
status: 'Resolved'
}, {
taskname: 'Test5',
taskId: '6',
status: 'Resolved'
}
}]
My code
var o/p = data.filter(x => x.status == input filed value);
The above code is not working properly. Thanks in advance.
let filterdData = data.filter(x => x.status.includes(input))
You can use String.prototype.includes() to return the subset of data whose status property includes your input
i'm trying to use this component
https://github.com/alexklibisz/angular-dual-multiselect-directive
but I don't know how could I pass data from the back-end to the component.
I get the data from the back-end:
var vm = this;
vm.Categoria1 = [];
$http.get('http://localhost:5541/api/date/ListCategorii').success(function (data) {
vm.Categoria1 = data;
}
);
I get the data:
[{"Id":1,"NumeCategorie":"Fructe"},{"Id":2,"NumeCategorie":"Legume"},{"Id":3,"NumeCategorie":"Ciocolata"}]
but below vm.Categoria1 is empty:
$scope.demoOptions = {
title: 'Demo: Recent World Cup Winners',
filterPlaceHolder: 'Start typing to filter the lists below.',
labelAll: 'All Items',
labelSelected: 'Selected Items',
helpMessage: ' Click items to transfer them between fields.',
/* angular will use this to filter your lists */
orderProperty: 'name',
/* this contains the initial list of all items (i.e. the left side) */
items: vm.Categoria1, //[{ 'id': '50', 'name': 'Germany' }, { 'id': '45', 'name': 'Spain' }, { 'id': '66', 'name': 'Italy' }, { 'id': '30', 'name': 'Brazil' }, { 'id': '41', 'name': 'France' }, { 'id': '34', 'name': 'Argentina' }],
/* this list should be initialized as empty or with any pre-selected items */
selectedItems: []
};
Thank you.
The best practice is to use like this :
var vm = this;
vm.Categoria1 = [];
$http.get('http://localhost:5541/api/date/ListCategorii')
.success(function(data) {
vm.Categoria1 = data;
$scope.demoOptions = {
title: 'Demo: Recent World Cup Winners',
filterPlaceHolder: 'Start typing to filter the lists below.',
labelAll: 'All Items',
labelSelected: 'Selected Items',
helpMessage: ' Click items to transfer them between fields.',
/* angular will use this to filter your lists */
orderProperty: 'name',
/* this contains the initial list of all items (i.e. the left side) */
items: vm.Categoria1, //[{ 'id': '50', 'name': 'Germany' }, { 'id': '45', 'name': 'Spain' }, { 'id': '66', 'name': 'Italy' }, { 'id': '30', 'name': 'Brazil' }, { 'id': '41', 'name': 'France' }, { 'id': '34', 'name': 'Argentina' }],
/* this list should be initialized as empty or with any pre-selected items */
selectedItems: []
})
.error(function(data, status) {
console.error('Repos error', status, data);
})
.finally(function() {
console.log("finally finished repos");
});
Hope that helps ! Sa-mi spui daca ai probleme.
You need to set demoOptions in the success callback:
var vm = this;
vm.Categoria1 = [];
$http.get('http://localhost:5541/api/date/ListCategorii').success(function (data) {
vm.Categoria1 = data;
$scope.demoOptions = {
title: 'Demo: Recent World Cup Winners',
filterPlaceHolder: 'Start typing to filter the lists below.',
labelAll: 'All Items',
labelSelected: 'Selected Items',
helpMessage: ' Click items to transfer them between fields.',
/* angular will use this to filter your lists */
orderProperty: 'name',
/* this contains the initial list of all items (i.e. the left side) */
items: vm.Categoria1, //[{ 'id': '50', 'name': 'Germany' }, { 'id': '45', 'name': 'Spain' }, { 'id': '66', 'name': 'Italy' }, { 'id': '30', 'name': 'Brazil' }, { 'id': '41', 'name': 'France' }, { 'id': '34', 'name': 'Argentina' }],
/* this list should be initialized as empty or with any pre-selected items */
selectedItems: []
};
});
Other option is, you can create one function contains that http.get
call and call that function on page load :
var vm = this;
vm.Categoria1 = [];
var onload = function(){
$http.get('http://localhost:5541/api/date/ListCategorii').success(function (data) {
vm.Categoria1 = data;
}
};
$scope.demoOptions = {
title: 'Demo: Recent World Cup Winners',
filterPlaceHolder: 'Start typing to filter the lists below.',
labelAll: 'All Items',
labelSelected: 'Selected Items',
helpMessage: ' Click items to transfer them between fields.',
/* angular will use this to filter your lists */
orderProperty: 'name',
/* this contains the initial list of all items (i.e. the left side) */
items: vm.Categoria1, //[{ 'id': '50', 'name': 'Germany' }, { 'id': '45', 'name': 'Spain' }, { 'id': '66', 'name': 'Italy' }, { 'id': '30', 'name': 'Brazil' }, { 'id': '41', 'name': 'France' }, { 'id': '34', 'name': 'Argentina' }],
/* this list should be initialized as empty or with any pre-selected items */
selectedItems: []
};
onload();
You should set the items in the request success :
$http.get('http://localhost:5541/api/date/ListCategorii')
.success(function (data) {
$scope.demoOptions.items = vm.Categoria1 = data;
});
I have one form which has 10 to 12 fields which contains dropdown and multi select drop down. I want before my controller function gets called all the fields should filled up. I tried something like this :
var app = angular.module('app', []);
app.config(function ($provide) {
var transactionType = [
{ id: 0, type: 'card', value: 'card' },
{ id: 1, type: 'cash', value: 'cash' },
{ id: 2, type: 'other', value: 'other' }
];
var friends = [
{ id: 0, name: 'A', value: 'A' },
{ id: 1, name: 'B', value: 'B' },
{ id: 2, name: 'C', value: 'C' },
{ id: 3, name: 'D', value: 'D' }
];
var currency = [
{ id: 0, currency: 'USD', value: 'USD' },
{ id: 0, currency: 'INR', value: 'INR' },
{ id: 0, currency: 'EUR', value: 'EUR' },
];
$provide.value('TransactionType', transactionType);
$provide.value('Friends', friends);
$provide.value('Currency', currency);
});
app.controller('MainCtrl', function ($scope, TransactionType, Friends, Currency) {
});
Is this the right way considering that may be in future I have to use http service to get array from DB and to populate on dropdown list?
I'd use a specific type of provider called a Factory instead. If you use promises in your factory when switch to http services you'd only need to change your factory code - the rest of your application will work without code changes!
angular.module('myApp')
.factory('Friend', function ($q) {
return {
list: function() {
var deferred = $q.defer();
deferred.resolve([
{ id: 0, name: 'A', value: 'A' },
{ id: 1, name: 'B', value: 'B' },
{ id: 2, name: 'C', value: 'C' },
{ id: 3, name: 'D', value: 'D' }
]);
return deferred.promise;
}
};
});