currently I have the problem to not be able to display some data in a dropdown. I want to create two different components in which the dropdowns could be. In one of them the dropdown is displayed properly, in the other I'm not able to make it running.
Here a small code snippet - I hope this is enough.
Working example:
component.html
<select class="test-table__input-filter table__input-filter" [formControl]="filter.control">
<option *ngFor="let entity of (entities | dropdownData: filter.name) | async">{{entity.name}}</option>
</select>
In the ts I have following line in ngOnInit:
this.entities.subscribe(val => console.log(val));
Which gives the following output in console:
{displayRole: Array(4)}
displayRole: Array(4)
0: {id: 1, name: "TEST1", title: "TEST1", priorityError: 4, priorityOffline: 3, …}
1: {id: 2, name: "TEST2", title: "TEST2", priorityError: 4, priorityOffline: 4, …}
2: {id: 3, name: "TEST3", title: "TEST3", priorityError: 4, priorityOffline: 4, …}
3: {id: 4, name: "TEST4", title: "TEST4", priorityError: 3, priorityOffline: 1, …}
length: 4
__proto__: Array(0)
__proto__: Object
Not working example:
<select class="test-form__field form__field form__field--error" [name]="field.name" [formControlName]="field.name">
<option *ngFor="let item of (field.data | dropdownData : field.name) | async">{{item.name}}</option>
</select>
In the ts I have following line in ngOnInit:
field.data.subscribe(val => console.log(val));
Which prints the following output in console:
{displayRole: Array(4)}
displayRole: Array(4)
0: {id: 1, name: "TEST1", title: "TEST1", priorityError: 4, priorityOffline: 3, …}
1: {id: 2, name: "TEST2", title: "TEST2", priorityError: 4, priorityOffline: 4, …}
2: {id: 3, name: "TEST3", title: "TEST3", priorityError: 4, priorityOffline: 4, …}
3: {id: 4, name: "TEST4", title: "TEST4", priorityError: 3, priorityOffline: 1, …}
length: 4
__proto__: Array(0)
__proto__: Object
So the console prints the same result twice. Hope you can help me.
Appreciate it!
Fr34k
Your error is that you are chaining wrong the pipes.
Check the following resource:
https://angular.io/guide/pipes#chaining-pipes
You should apply first: async and then dropdownData: filter.name
Your code should be like this:
component.html
<select class="test-table__input-filter table__input-filter" [formControl]="filter.control">
<option *ngFor="let entity of entities | async | dropdownData: filter.name">{{entity.name}}</option>
</select>
another component
<select class="test-form__field form__field form__field--error" [name]="field.name" [formControlName]="field.name">
<option *ngFor="let item of field.data | async | dropdownData : field.name">{{item.name}}</option>
</select>
Check if works with that change.
Related
$scope.settingList = data;
Below are the output of data.
0: {id: 5, accountId: 8, name: "Support Email", value: "haozii_94#hotmail.com"}
1: {accountId: 8, name: "Domain Name"}
2: {accountId: 8, name: "Self Registration"}
3: {accountId: 8, name: "SMS Sender Id"}
4: {id: 8, accountId: 8, name: "Ticket System", value: "ajsdasd"}
length: 5
proto: Array(0)
How do i do so that i can put the data of "Ticket system" to a new scope?
I'm trying to get data from web service API
All i get is the data on console.
the web service requires ID so i post the id first and then getting data that related to that ID inside the web service, this is my component.
HTML:
<form #educationForm="ngForm" method="post">
<select [(ngModel)]="type_id" name="type_id" class="rounded-inputs20 col-md-2" id="getGrades">
<option selected="selected">Education type...</option>
<option id="" *ngFor="let type_id of name_en" [ngValue]="type_id.id">{{type_id.name_en}}</option>
</select>
</form>
<input type="button" name="previous" class="previous action-button-previous" value="Previous"/>
<input type="button" name="next" class="next action-button (click)="onSubmitGrade(educationForm)" value="next"/>
<fieldset>
<div class="col-md-12 text-center row schools">
<div class="col-md-6" *ngFor="let grade of grades">
<h6 style="font-size: 26px;" name="grades">
{{grade.name}}<input [value]="grade.id" id="select-all-grades6" type="checkbox">
</h6>
<br>
</div>
</div>
</fieldset>
TS:
private educationType() {
return this._http.get('https://crm.easyschools.org/api/
en/schools/create/educationtypes')
.subscribe(type_id => {
this.id = type_id.id;
this.name_en = type_id.data;
console.log(type_id.data);
});
}
onSubmitGrade(form: NgForm) {
let formData: FormData = new FormData();
// debugger;
formData.append('education_type_id', this.type_id);
this._http.post('https://crm.easyschools.org/api/en/schools/
create/getgrades', formData)
.subscribe(grades => {
// this.type_id = this.education_type_id;
this.id = this.type_id.id;
this.name = grades.data;
console.log(grades.data);
}, (err: HttpErrorResponse) => {
console.log(err);
});
}
The response i get from the console is:
(13) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0
:
{id: 11, name: "Elementary", lessons_per_day: 5, lesson_duration:
"08:21:20", day_start_at: "08:24:27", …}
1
:
{id: 13, name: "Secondary", lessons_per_day: 6, lesson_duration:
"09:25:25", day_start_at: "10:29:00", …}
2
:
{id: 16, name: "Castor Sharp", lessons_per_day: 12, lesson_duration:
"00:00:12", day_start_at: "17:30:00", …}
3
:
{id: 17, name: "Ifeoma Cochran", lessons_per_day: 12, lesson_duration:
"00:00:04", day_start_at: "23:09:00", …}
4
:
{id: 18, name: "Jermaine Tyson", lessons_per_day: 12, lesson_duration:
"00:00:14", day_start_at: "18:01:00", …}
5
:
{id: 19, name: "Quin Wells", lessons_per_day: 12, lesson_duration:
"00:00:04", day_start_at: "11:25:00", …}
6
:
{id: 20, name: "Hiram Coffey", lessons_per_day: 12, lesson_duration:
"00:00:04", day_start_at: "06:14:00", …}
7
:
{id: 21, name: "Shad Floyd", lessons_per_day: 12, lesson_duration:
"00:00:04", day_start_at: "21:01:00", …}
8
:
{id: 22, name: "Oleg Ball", lessons_per_day: 12, lesson_duration:
"00:00:41", day_start_at: "00:08:00", …}
9
:
{id: 23, name: "Ivory Gates", lessons_per_day: 12, lesson_duration:
"00:00:41", day_start_at: "16:33:00", …}
10
:
{id: 24, name: "Serina Edwards", lessons_per_day: 12, lesson_duration:
"00:00:41", day_start_at: "13:51:00", …}
11
:
{id: 25, name: "dsos", lessons_per_day: 44, lesson_duration:
"00:00:45",
day_start_at: "12:30:00", …}
12
:
{id: 26, name: "Nissim Hurley", lessons_per_day: 12, lesson_duration:
"00:00:04", day_start_at: "10:33:00", …}
length
:
13
__proto__
:
Array(0)
I need to be able to display the data on the console on the screen, but my code is not showing anything.
Feel free to use the API links to test and show me what is missing in my code.
I do not see anywhere you have grades declared in your template, have a variable declared and assign the response data to the variable.
grades :any = [];
and then
this._http.post('https://crm.easyschools.org/api/en/schools/ create/getgrades', formData) .subscribe(result=> { this.grades = result.data;}, (err: HttpErrorResponse) => { console.log(err); }); }
or with the existing template replace grades with name,
<div class="col-md-6" *ngFor="let grade of name"
I'm trying to sort a string[] in descending way. So far what I have done is the code below:
let values = ["Saab", "Volvo", "BMW"]; // example
values.sort();
values.reverse();
It's working but I'm trying to figure out if there is a better way to do it.
You need to create a comparison function and pass it as a parameter of sort function:
values.sort((one, two) => (one > two ? -1 : 1));
A more current answer is that you can utilize String.prototype.localCompare() to get a numeric comparison value
Simple example:
let values = ["Saab", "Volvo", "BMW"];
values.sort((a, b) => b.localeCompare(a))
This also wont causes TypeScript warnings as the output of localCompare is a number
More info and additional function parameters can be seen here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare
Use the following code to sorting the Array in ascending and descending order.
const ascending: any= values.sort((a,b) => (a > b ? 1 : -1));
const descending: any= values.sort((a,b) => (a > b ? -1 : 1))
The most recent lib that I know
https://www.npmjs.com/package/ngx-pipes
const numbers = [2, 1, 3];
const obj = [
{id: 4, name: 'Dave', amount: 2},
{id: 2, name: 'Michael', amount: 2},
{id: 3, name: 'Dan', amount: 1},
{id: 1, name: 'John', amount: 1}
];
const deepObj = [
{id: 1, name: 'John', amount: 1337, deep: {prop: 4}},
{id: 2, name: 'Michael', amount: 42, deep: {prop: 2}},
{id: 3, name: 'Dan', amount: 1, deep: {prop: 1}},
{id: 4, name: 'Dave', amount: 2, deep: {prop: 3}}
];
<!-- Returns array ordered by value -->
<p>{{ numbers | orderBy }}</p> <!-- Output: [1, 2, 3] -->
<p>{{ numbers | orderBy: '-' }}</p> <!-- Output: [3, 2, 1] -->
<!-- Returns array ordered by value of property -->
<p>{{ deepObj | orderBy: 'amount' }}</p>
<!-- Output: [{id: 3, ...}, {id: 4, ...}, {id: 2, ...}, {id: 1, ...}] -->
<p>{{ deepObj | orderBy: '-amount' }}</p>
<!-- Output: [{id: 1, ...}, {id: 2, ...}, {id: 4, ...}, {id: 3, ...}] -->
<!-- Returns array ordered by value of deep property -->
<p>{{ deepObj | orderBy: 'deep.prop' }}</p>
<!-- Output: [{id: 3, ...}, {id: 2, ...}, {id: 4, ...}, {id: 1, ...}] -->
<p>{{ deepObj | orderBy: '-deep.prop' }}</p>
<!-- Output: [{id: 1, ...}, {id: 4, ...}, {id: 2, ...}, {id: 3, ...}] -->
<!-- Returns array ordered by mutliple properties -->
<p>{{ obj | orderBy: ['amount', 'id'] }}</p>
<!-- Output: [{id: 1, ...}, {id: 3, ...}, {id: 2, ...}, {id: 4, ...}] -->
Must be like this programmatically
#Component({
// ..
providers: [OrderByPipe]
})
export class AppComponent {
constructor(private orderByPipe: OrderByPipe){
let values = ["Saab", "Volvo", "BMW"];
this.orderByPipe.transform(values, '-');
}
}
This is normal reverse sorting
var nums:number[] = [1,2,3,4]
nums.sort((a,b)=> a < b ? 1:-1)
[ 4, 3, 2, 1 ]
If you have to do the sorting of custom objects, try this
class Student{
name:String
marks:Number
constructor(name:string, marks:number) {
this.name = name
this.marks = marks
}
}
var students:Array<Student> = [
new Student("aseem",47),
new Student("prem",97),
new Student("john",100)
]
console.log(students.sort( (a,b)=> a.marks > b.marks ? -1:1 ))
would result in sorting by marks in reverse order
/usr/local/bin/node /Users/asee2278/git/mycode/JavaScriptLab/typeScript/concepts/sort.js
[
Student { name: 'john', marks: 100 },
Student { name: 'prem', marks: 97 },
Student { name: 'aseem', marks: 47 }
]
$scope.accounts = [
{id: 1, name: 'Tommy',status:'premium'},
{id: 2, name: 'Alexander',status:'free'},
{id: 3, name: 'Lorem',status:'banned'},
{id: 4, name: 'Ipsum',status:'premium'}
{id: 5, name: 'Dot sit',status:'Y'}
];
How can I adjust dynamically to the situation in this json output?
for example, multiple data in groupby
<select>
<option>premium</option>
<option>free</option>
<option>banned</option>
<option>y</option>
</select>
(My English is bad )
<select ng-options="item as item.status for item in (accounts | unique: 'status')"></select>
You need to include the filter from https://github.com/angular-ui/angular-ui-OLDREPO/tree/master/modules/filters/unique
I hope someone can help me.
For my current project in angular 1.3 I'm using this list:
$scope.myList = [{
id: "obj1",
content: [{
id: 1,
name: 'attr 1'
}, {
id: 2,
name: 'attr 2'
}, {
id: 3,
name: 'attr 3'
}]
}, {
id: "obj2",
content: [{
id: 4,
name: 'attr 4'
}, {
id: 5,
name: 'attr 5'
}, {
id: 6,
name: 'attr 6'
}]
}, {
id: "obj3",
content: [{
id: 7,
name: 'attr 7'
}, {
id: 8,
name: 'attr 8'
}, {
id: 9,
name: 'attr 9'
}]
}];
I would like to get the object which has the id X in the content array.
I used this ng-repeat:
<ul>
<li ng-repeat="item in myList | filter: {content: [{id:1}]}">
{{item}}
</li>
</ul>
When I use id:1, id:4 or id:7 it works, but not for the other ids...
Has anyone any ideas?
Edit
I FINALLY found out what caused the problem, I was using angular 1.3.0. After upgrading to 1.3.11 it worked!!
You can filter based on nested properties like so:
<li ng-repeat="item in myList | filter: {content: {id: '1'}}">
{{item}}
</li>
It's important to note that the "object" (that has the id X) you'll get will be at the item level.