how to slice a json array in Angular

Question

I want to slice the the json array in Angular which looks like this below.

And the code is below

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

But it always shows res.data.result[0].slice is not a function, but we can see res.data.result[0] is literally a json array which can iterate in using *ngFor.

So which shold i use for slicing the json arry.

@OwenKelvin I used it in Vue, so I thought it gone works too in angular, however i will check the angular doc later about httpclient thanks for your advice. — Kaining xin
– Kaining xin, Commented Nov 16, 2020 at 15:57

topdev87 · Accepted Answer · 2020-11-16 15:43:01Z

2

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

answered Nov 16, 2020 at 15:43

topdev87

8,7913 gold badges11 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Owen Kelvin · Accepted Answer · 2020-11-16 18:19:40Z

0

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

answered Nov 16, 2020 at 18:19

Owen Kelvin

15.1k11 gold badges51 silver badges86 bronze badges

1 Comment

Kaining xin Over a year ago

Thanks for your addition, I just learned to use httpclient instead of axios to execute http request. And at first, I wrote just like you did but it alerted that there were not exist ''data'' attribute for 'res', so in considering the data structure of the val stored in Observable, I had to identify the Observable with an interface so that I could get access to the data inside the observable object.

Collectives™ on Stack Overflow

how to slice a json array in Angular

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related