I just installed angular 4 multiselect dropdown to show the data that i am getting from JSON script using services. I am getting the data in my property but now i want to show it in a multiselect dropdown so that i can use multiple values and assign them to my next property. So in the below code i am calling a method of getSubject and it is returning me the data in this.subject property.
this._curriculumService.getSubject(this.appSession.tenant.tenancyName)
.finally(() => {this.saving = false;})
.subscribe((result: listResultDtoOfSubjectDto) => {
this.subjects = result.items;
this.id = this.subjects.map(a => a.code);
this.itemName = this.subjects.map(a => a.name);
})
Now i want to show this data inside inside angular 4 dropdown multiselect and here is a code for that in my component.ts file. The problem is that the dropdown asked for a specific id and name of the property and only then it will be able to show the data in dropdown but in my case i have a name and code returning in this.subjects. So how can i show my data in this dropdown
optionsModel: number[];
myOptions: IMultiSelectOption[];
this.myOptions = [
{ id: 1, name: 'Physics' },
{ id: 2, name: 'English' },
{ id: 3, name: 'English' },
{ id: 4, name: 'Programming'}
];
HTML Code
<div class="form-line focused">
<div class="col-sm-4">
<div class="form-group form-float">
<div class="form-line focused">
<ss-multiselect-dropdown
[options]="myOptions"
[(ngModel)]="optionsModel"
(ngModelChange)="onChange($event)">
</ss-multiselect-dropdown>
</div>
</div>
</div>
</div>
So for that don't declare type of your myOptions as IMultiSelectOption[], instead keep it any or whatever you're receiving from service. As this plugin requires each options to have the id thus, you can add that property to myOptions objects after it's received from service response. So, make sure that property should be unique valued (e.g. subject code).
Let this.subjects is an array of objects you got from service:
optionsModel: number[];
subjects: any;
this.subjects = [
{ code: 11, name: 'Physics' },
{ code: 12, name: 'English' },
{ code: 13, name: 'English' },
{ code: 14, name: 'Programming'}
];
this.subjects.forEach(function(e) { e.id = e.code });
The last line will add id property to each object with value same to subject code. Now the dropdown will work as expected.
Demo Example
Related
I have a Highcharts Gantt chart which is pulling parsed JSON data from a MySQL table.
The data spans 4 years, but I need to filter it so that it only shows data for 2022.
The issue is that I cannot use the standard Highcharts data filter as it does not remove empty rows without any data.
I would like to filter the data before the chart is even rendered so that rows without bars are not shown at all. Is that possible?
It is really easy, you just need to filter your JSON data before creating a chart. A simplified process will be like below:
const receivedData = [{
name: 'Start prototype',
start: '2021-04-11',
end: '2021-04-17'
}, {
name: 'Test prototype',
start: '2022-04-11',
end: '2022-04-17'
}, {
name: 'Develop',
start: '2022-06-11',
end: '2022-07-11'
}, {
name: 'Run acceptance tests',
start: '2022-09-11',
end: '2022-09-21'
}];
const filteredData = receivedData.filter(
dataEl => new Date(dataEl.start) > new Date('2022')
);
// THE CHART
Highcharts.ganttChart('container', {
series: [{
name: 'Project 1',
data: filteredData.map(({
name,
start,
end
}) => ({
name,
start: new Date(start).getTime(),
end: new Date(end).getTime()
}))
}]
});
Live demo: https://jsfiddle.net/BlackLabel/0vhdg5jw/
I am building a form using Angular Reactive Forms. The field I'm trying to add is a list of Checkboxes. The Checkbox will indicate the presence of a keyword, which is actually an object and not a string value. I could convert a string to the object during an onChange or onSubmit later on. The issue I am having is the checkboxes won't appear because it cannot find them in the FormArray.
TS:
// class member:
availableKeywords = [
{value: false, viewValue: 'Impetus (Rush)', valueId: 0},
{value: false, viewValue: 'Guard (Taunt)', valueId: 1}
];
// in ngOnInit:
this.cardForm = new FormGroup({
// ...
keywords: new FormArray([]),
}
// after building my form, still in ngOnInit
// find all the keywords that are present in the "card" object (DBO), and enable them in my available keywords list
this.availableKeywords.filter((akw) => this.card.keywords.find(ckw => ckw.valueId === akw.valueId)).forEach(kw => kw.value = true);
//Now, add all the available keywords to the form with their current states:
const keywordArray = this.cardForm.get('keywords') as FormArray;
this.availableKeywords.forEach(akw => {
keywordArray.push(new FormControl(akw));
});
HTML:
<section formArrayName="keywords">
<div *ngFor="let keyword of availableKeywords; let i = index">
<mat-checkbox [formControlName]="i">
{{keyword.viewValue}}
</mat-checkbox>
</div>
</section>
I have a console.log(this.cardForm.value); line right after all that, and it prints out the value of the form right before the error (both in screenshot).
The error:
The issue was not importing MatCheckboxModule.
I have below interface.
interface ProductJson {
id: number;
name: string;
price: number;
}
I want to have multiple alias names for price, like price and alias names: rate, etc. How can I read json data attribute 'rate' for 'price' and also read 'price' too.
You can use a custom serializer to create aliases between fields:
Example using #kaiu/serializer:
class ProductJson {
id: number;
name: string;
#FieldName('rate')
price: number;
}
Or you can also create a getter method and use the serializert to map your JSON to a class instance in order to use your method directly, see https://kaiu-lab.github.io/serializer/ for in-depth stuff.
One way is to maintain a group of attribute names that you want to alias.
And then add the interface property price to the json itself, if it contains the aliased properties like rate or amount.
Now you can simply access price from else where, which should give the same value
Ex:
var price_group = ['price', 'rate', 'amount'];
var some_other_group = []
var resp = {rate: 200, p: 12}
var resp2 = {price: 300, p: 12};
Object.keys(resp).forEach(key => {
if(price_group.indexOf(key) > -1){
resp.price = resp[key]
}
});
console.log(resp.price)
Object.keys(resp2).forEach(key => {
if(price_group.indexOf(key) > -1){
resp.price = resp[key]
}
});
console.log(resp2.price)
I'm not sure you can do that tbh.
You can easily do it by programming your stuff that reads/writes the json to accept stuff like rate, price, moolah and just write it as
{
price: number
}
edit: what i'm saying is you take the user input or any other input that specifies something like {moolah: 30} and you take that '30' and put it on {price: 30} in your json.
I have the following JSON Object, which is the result of a loopback model (Classifications), with a relationship with another model (Labels).
My call to get the classifications is:
modClassification.findOne({
where: { id: classificationid },
include: 'labels' },
function( err, classification ){ ...
And this returns classification with something like
{ id: 'b01',
title: 'population',
country_id: 1,
labels:
[ { column_id: 'b1',
classification_id: 'b01',
classification_title: 'population',
dsporder: 1,
label: 'Total_Persons_Males',
country_id: 1,
id: 1 },
{ column_id: 'b2',
classification_id: 'b01',
classification_title: 'population',
dsporder: 2,
label: 'Total_Persons_Females',
country_id: 1,
id: 2 } ] }
which is what I would expect.
I now need to loop over the labels and access it's properties, but this is where I am stuck.
classification.labels[0] = undefined..
I have tried looping, each and whatever I can find online, but can't seem to get to each labels properties.
Can someone tell me what I am doing wrong/need to do?
Thanks
When you are including related models inside a findOne call, you need to JSONify the result before accessing the related records:
classification = classification.toJSON()
Then you should be able to access the included label items as you expect.
See https://docs.strongloop.com/display/public/LB/Include+filter, specifically the "Access included objects" section.
Note this does not work the same when you retrieve more than one result in an array. In that case you'll need to perform toJSON() on each item in the array.
I'm having a little problem and couldn't figure it out. I created a table with checkbox and it's working and can save to json without a problem. Now i wanna make my checkboxes have their default values set from json data when the page loads (to make it easier to edit). Anyway here is my code:
//row index
var index = 0;
//gets full info of student
var responseStudent = rpc.call('db.findOne', ['StudentAnket', {
'_id': '${this.objId}'
}]);
result = responseStudent['result'];
//gets info needed for my table
//{anket: true, request: true, statement: false, etc...}
var resultMat = result['listmaterial'];
//materials is a list which contains id, name of rows
materials.forEach((m) {
//creating table body
index = index + 1;
tbody.append(new Element.tr()
..append(new TableCellElement()..text = index.toString())
..append(new TableCellElement()..append(new LabelElement()
..text = m['name']
..setAttribute('for', m['id'])))
..append(new TableCellElement()..append(new InputElement()
..id = m['id']
..type = "checkbox"
..checked = "VALUE TAKEN FROM JSON")));
});
So how can i get keys and values from resultMat and set checked property for each checkbox?
Edit:
List materials = [{
'id': 'anket',
'name': 'Student anket'
}, {
'id': 'request',
'name': 'Request'
}, {
'id': 'statement',
'name': 'Statement'
}, {
'id': 'marklist',
'name': 'Mark List'
}];
Your information how your materials structure looks like is not clear. A List has only one value not two ('id, 'name of rows'). First you have to ensure that your JSON is not a String but a Dart data structure (Lists, Maps, values).
You can take a look at the answers to this questions to learn how this works
Dart Parse JSON into Table
Then you should be able to access the value like
..checked = resultMat[m['id']] ;