如何在 Angular 中切片一個 json 數組

Question

我想在 Angular 中切片 json 數組，如下所示。

代碼如下

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 = res.data.result[0].slice(0,10);
      console.log(this.stocklist);
    })
  }
}

但是它總是顯示 res.data.result[0].slice 不是一個函數，但是我們可以看到 res.data.result[0] 實際上是一個可以使用 *ngFor 迭代的 json 數組。

所以我用哪個shold來切片json arry。

Answer 1

slice()是Array的方法，但您正在為對象調用它。

使用Object.values()使其成為數組。

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 2

對實現Observables @WilliamWang 解決方案的補充

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);
    })
  }
}