How do I get the value from [object Object] on event change - javascript

On event change I'm trying to capture the value of an object that's displayed in a select drop down.
<ion-select
placeholder="Select your itinerary"
(ionChange)="handleChange($event)"
(ionCancel)="pushLog('ionCancel fired')"
(ionDismiss)="pushLog('ionDismiss fired')">
<ion-select-option *ngFor="let itinerary of myItineraries" value="{{itinerary?.itinerary}}">{{itinerary?.itinerary.destination}}</ion-select-option>
</ion-select>
There are several properties in itinerary that I need but I'm only displaying the destination. However, I need those other properties on event change.
However, when I attempt to capture the change I'm only getting [Object object].
handleChange(e) {
console.log('event', e.target);
this.pushLog('ionChange fired with value: ' + e.detail.value);
}
and this is the console.log:
ionChange fired with value: '[Object object]
After searching online I've tried using JSON.stringify(e.detail.value) simply gives me "[Object object]"
How do I get the actual values of the object's other properties?

If you want to use an object (or array) instead of a string as the value, you'd need to set it like this: [value]="itinerary?.itinerary":
<ion-select
placeholder="Select your itinerary"
(ionChange)="handleChange($event)"
(ionCancel)="pushLog('ionCancel fired')"
(ionDismiss)="pushLog('ionDismiss fired')">
<ion-select-option *ngFor="let itinerary of myItineraries" [value]="itinerary?.itinerary">
{{ itinerary?.itinerary.destination }}
</ion-select-option>
</ion-select>
Then in the component's code, you can get the selected value like this:
handleChange(e) {
console.log(e.detail.value);
}

I really don't like this solution but it works. I get the other propery values by referencing them in the html:
const test = e.detail.value.split("*");
console.log('event', test);
this.pushLog('ionChange fired with value: ' + test);
value="{{itinerary?.itinerary.destination}}, * {{itinerary?.itinerary.moreProperties}}"
The event has all of the different values in one string that I have to split.
I don't like this because it pollutes the html, and I have to use * to separate the string and I'm not 100% the order will stay the same. I have to assume the order won't change and I'll never have "*" in any of the other property fields. There's got to be a better way to do this.

Related

How to make mat-select first option null?

I use 3 mat-select for day-month-year selection as shown on this DEMO.
I need to make the first options as null or undefined and modify that code as shown below:
allDates: number[] = [null];
dates: number[] = [null];
months: number[] = [null];
years: number[] = [null];
But I am not sure if it is a good idea or is there a proper way for mat-select. I also try to set [value]=null for the mat-select options, but in that case it does not receive the value properly. So, what is a proper way for this?
Is there a reason they need to be null? In my opinion it is more confusing to have a blank option.
Play around with the stack blitz to see how it behaves when initialized as an empty array vs when it is bound to an array with one null item. I think the UX is great when the mat-select is bound to an empty array. The mat-label resides in the select box, easy to see what type of data is in the select. Also when you click it, it doesn't show any options, because there aren't any. If you have a null, then the dropdown opens with one blank item.
I don't think there is anything wrong with the code you provided.
Edit:
You can bind the mat-select item with an object and use a display property to show the text and a value property to bind to the actual value.
Say you have an interface like this:
export interface DateSelectItem
{
value: number;
label: string;
}
let dates: DateSelectItem[] = [
{
value: -1
label: "None"
}
];
selectedDate: DateSelectItem;
in the template:
<mat-form-field>
<mat-label>Date</mat-label>
<mat-select [(ngModel)]="selectedDate">
<mat-option *ngFor="let date of dates" [value]="date">
{{date.label}}
</mat-option>
</mat-select>
</mat-form-field>
You can use just strings and convert them back and forth with their number equivalents.
Or if you use an object you can use the label property to display something other than the value.
EDIT: Modified StackBlitz
You will probably need to update the business logic on what you want the resulting date to look like if the user selects 'None' for day-of-the-month.
Updated StackBlitz

Ng-Select Selected are not updating from ngModel

I'm experiencing a problem that has me stumped. I have an ng-select. When loading records to the ngModel, it doesn't change the ng-select. The weirdest part is that on another page, the same code works.
I've tried numerous different options, even creating new arrays just to test. Also tried setTimeout to see if something is clearing the selection.
The HTML code
<label>
Add a Secondary channel
</label>
<br />
<ng-select placeholder="Select schools" items="schoolsArray" [(ngModel)]="selectedSecondSchools" [multiple]="true" name="secondSchools"
#secondSchools="ngModel">
</ng-select>
</div>
The one function in the component. The array is declared as selectedSecondSchools[] = [];
getVodEventGameSecondaryChannels(vodEventId: number, vodEventGameId: number): string[] {
let schoolIds: string[] = [];
this.vodEventService
.getVodEventGameSecondaryChannelsByGameId(vodEventId, vodEventGameId)
.subscribe((sc: IVodEventGameSecondaryChannels[]) => {
sc.forEach(gsc => {
schoolIds.push(
gsc.schoolId.toString());
});
});
this.eventGame.gameSecondaryChannelIds = schoolIds;
this.selectedSecondSchools = schoolIds;
return schoolIds;
}
When the data is returned, the returned IDs need to be selected within the ng-select and displayed.
It depends on the type of schoolsArray. In your case, I guess, schoolsArray is a list of objects, while ngModel is an array of strings. ng-select doesn't know how to map strings from ngModel to objects from items.
Please see documentation for property bindValue to inform ng-select how to bind items keys to the model. https://github.com/ng-select/ng-select
To summarize, add bindValue="id-property-name-in-items" to ng-select tag.

DOM not updated when taken value from localstorage

I have created an button as:
<ion-radio ng-repeat="business in multipleBusiness track by business.id" ng-model="choice.value" ng-value="business">{{business.name}}</ion-radio>
and In controller I am doing...
$scope.choice.value = localStorageService.get('defaultBusiness') || $scope.multipleBusiness[0];
Now the radio buttons are shown with a checkmark when the value passed to $scope.choce.value is $scope.multipleBusiness[0] but when the value from localStorage is used i.e. localStorageService.get('defaultBusiness') , the chekmark is not shown
Even though on consoling both the values are same structure i.e objects with id and name keys.
The localStorageService.get('defaultBusiness') will return string. You need to use JSON.parse() to have it as an json object.

How to recognize the primary text of selected <MenuItem/> in ReactJS Material-UI?

I am using http://www.material-ui.com/#/components/dropdown-menu and I would like to console log the primaryText of<MenuItem/> selected. How can I go about doing so?
use onChange(event: object, key: number, value: any) function.
The event object has the information about the selected item.
you can try to
console.log(event.target.textContent)

Get returned $scope value from ng-model

How can I get a value from an object generated from an input using ng-model for use in my script rather than both the key and value?
So close to solving this problem now that extends from my previous question here Get a value from input to use in controller Angular JS
I've finally managed to prevent a single input value in a table (using ng-repeat) from displaying in each identical location for each row by using the following code:
<input data-ng-model="newEmail[$index]" type="text" id="newEmail" maxlength="254" pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,3}$" size="20" class="form-control" placeholder="{{user.email}}">
Basically, I need to get the value entered from the ng-model to use in my controller, which I'm currently using like this:
$scope.newEmail = {};
$scope.updateProfile = function (profile) {
setTimeout(function () {
console.log('New email is: ', $scope.newEmail);
}, 1000);
};
The problem I'm getting is that it returns an object as { 1: 'whatever text is entered here' } from the input box. I then simply can not seem to get the value out of the object to update a value in Firebase as it writes both the key and value to the Firebase location I'm trying to write to.
There must be a super simple way to get just the value out of the object that I'm missing?
The input box doesn't return an object. It's because you're not assigning your ng-model just as $scope.newEmail but $scope.newEmail[$index] instead. That's why you get {1: '...'} when you get $scope.newEmail and it is correct.
I don't know what's you use case but why are you initialising newEmail as an object and not just:
$scope.newEmail = null
and then assigning it as:
ng-model="newEmail"

Categories