slice() is the method of the Array, but you are calling it for the object.
Use Object.values() to make it to array.
export class AppComponent {
color: string = 'green';
public stocklist = [];
public objectKeys = Object.keys;
constructor() {
let url = 'http://localhost:8080/stocks';
axios.get(url).then(res =>{
this.stocklist = Object.values(res.data.result[0]).slice(0,10);
console.log(this.stocklist);
})
}
}
Answer from topdev87 on Stack Overflowslice() is the method of the Array, but you are calling it for the object.
Use Object.values() to make it to array.
export class AppComponent {
color: string = 'green';
public stocklist = [];
public objectKeys = Object.keys;
constructor() {
let url = 'http://localhost:8080/stocks';
axios.get(url).then(res =>{
this.stocklist = Object.values(res.data.result[0]).slice(0,10);
console.log(this.stocklist);
})
}
}
An addition to @WilliamWang solution implementing Observables
export class AppComponent implements OnInit {
color: string = 'green';
public stocklist = [];
public objectKeys = Object.keys;
constructor(private httpClient: HttpClient) { }
ngOnInit() {
let url = 'http://localhost:8080/stocks';
this.httpClient.get(url).subscribe(res => {
this.stocklist = Object.values(res.data.result[0]).slice(0,10);
console.log(this.stocklist);
})
}
}
Videos
<p class="break-word-text" >
<span *ngIf="enumValues && enumValues.length > 10">{{enumValues.slice(0, 10)}} <a href="#" title="{{enumValues}}">View more</a></span>
<span *ngIf="enumValues && enumValues.length <= 10">{{enumValues}}</span>
</p>
displayFull() {
this.enumValues = this.fullText;
}
getData() {
this.service.getDetails(this.id).subscribe((response: any) => {
if (response && response.data) {
this.fullText = response.data; // declare fullText on the top of the class else this will show error.
this.enumValues = this.fullText.length > 10 ? this.fullText.slice(0, 10): this.fullText; // Add "+ '...'" if you want to add eclipses.
}
});
}
in HTML
<p class="break-word-text">
{{enumValues}}
</p>
<a href="#" *ngIf="enumValues !== fullText" (click)="displayFull()">View More</a>
Just remove "(double quotes) from the start and end variable
Copy<ion-item *ngFor='let item of items | slice:start:end'>
For the slice: 0:5 does not work. here is my solution
Copy <div class="symbol-group symbol-hover"
*ngFor='let memebr of group?.Members.slice(0,5); let j=index,let y=last'>
</div>
When you are assigning this.mainList to this.filteredList you are copying the reference. So any actions you perform on one list will affect the other.
Instead you should take a copy of the array by using slice.
this.filteredList=this.mainList.slice();
Note - the object references inside the arrays are still the same - so any actions you perform on the inner objects will be reflected in both lists.
const arr1 = [1,2,3];
const arr2 = arr1;
arr2[1] = 4;
console.log('update reference');
console.log(arr1, arr2);
const arr3 = arr1.slice();
arr3[1] = 2;
console.log('update slice');
console.log(arr1, arr3);
EDIT
While this is one part of your issue, you are still copying your main array reference in other parts of your code.
I would recommend starting again with a different approach. Here's my very simplified version, albeit without "Select All" functionality: https://stackblitz.com/edit/angular-ihkbfn
this.filteredList = this.mainList.map(ele=>{return ele});
after this perform all the operation on filteredlist as this will make a deep copy of the array
You can either use slice
array.slice(0, 3);
if you want to modify the original array use,
arr.length = 3;
Demo :
var arr = [1, 2, 3, 4];
var newArr = arr.slice(0,3);
console.log(newArr);
A good function is to use the slice function from array. An example looks like this:
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(0, 3);
The result will be citrus = Banana,Orange,Lemon