2

I'm completely new to the concept of using arrays in angular2. I've my JSON data coming from the backend which I'm storing in an array called "arr". But I want to access an array which is present in every object that is in "arr" i.e every object in "arr" has an array which has some elements in it. I want to access that array in my .ts file not HTML file. I need to do some modifications on that in .ts file so I want to know how do I create a pipe for the same.

I read that we need to use pipes.But I'm not understanding how do I use a pipe for this. If you can see in the picture there is a main array which has 3 objects and each of the 3 objects have an array called categories which again has objects. I want to access the field "category" inside categories for all the 3 objects present in the main array. Can someone help me do it ?

This is how my data looks

Impromptu_Coder
  • 425
  • 3
  • 7
  • 27

2 Answers2

2

If it's in html

<div *ngFor="let item of arr">
 {{item.aliasname}}
 <div *ngFor="let category of item.categories">
    {{category.name}}
 </div>
</div>

In type script you can use a foreach loop

arr.forEach(element => {
    element.forEach(category => {
       console.log(category.name);
       // Do whatever you want
       // You can access any field like that : category.yourField
    });
});

An other way to foreach in Angular2

Community
  • 1
  • 1
Toodoo
  • 8,570
  • 6
  • 35
  • 58
  • Thanks. But I'm sorry I want to do this in typescript. – Impromptu_Coder Apr 05 '17 at 12:54
  • @Impromptu_Coder I've added it ;) – Toodoo Apr 05 '17 at 12:55
  • @Impromptu_Coder it's in my answer, the second part – Toodoo Apr 05 '17 at 12:58
  • @Impromptu_Coder Can't go further if you don't provide any line of code. I showed you how to loop througt nested array in Angular2. Can't do better without any code. – Toodoo Apr 05 '17 at 13:21
  • this.http.get('results/exams',{ }).subscribe(resp=>{ this.searchResults = resp.data; console.log(this.searchResults); }, err=>{console.log(err);}, ()=>{}); this.searchResults.forEach(element => { element.forEach(category => { console.log(category.name); }); }); } This is what I've tried and it shows the error that I mentioned above. My API call is working. – Impromptu_Coder Apr 05 '17 at 13:46
1

No need for pipes here, pipes would be used for actually displaying data in template, e.g if you would need to iterate object keys, which can not be used with *ngFor. But since you want to manipulate data in the component....

You need two forEaches to reach every each category inside the different objects. And you need to do this from the callback (subscribe) after you have received the data, here's some more info on that: How do I return the response from an Observable/http/async call in angular2?

I suggest you do the http requests in a service, and subscribe to the data in your component, so in your component, call that service method and subscribe to the response and then use forEach:

ngOnInit() {
  this.service.getData()
    .subscribe(data => {
      this.searchResults = data;
      // call method or manipulate data here since response has been received
      this.manipulateData();
    });
}

manipulateData() {
    this.searchResults.forEach((x:any)=> { // iterate outer array
      x.categories.forEach((y:any) => { // iterate the categories of each object
        console.log(y.name) // ... or whatever properties you have
        // manipulate your data
      })
    })
}

DEMO

Community
  • 1
  • 1
AT82
  • 71,416
  • 24
  • 140
  • 167
  • Thanks a ton. It's working. You made my day. I have a doubt, I did write my service call in a service.ts file and used it in my component.So what I did is I called the function "manipulateData()" inside subscribe and then in this manipulateData() I wrote 2 foreachs.But it didn't work.So I directly wrote the forEachs inside the subscribe and it works. Any reason for this? Also to add to my question a further. Can you tell me how can I fetch only unique category ids instead of all the category ids? – Impromptu_Coder Apr 05 '17 at 15:22
  • Hard to say why it doesn't work with the `manipulateData`-method based on not seeing any of your code. It *should* work, like I provided in plunker. As to your second question, you'd have to write some logic to filter the only unique id's from your data.... Here would be a question pretty close to yours I think :) http://stackoverflow.com/questions/15125920/how-to-get-distinct-values-from-an-array-of-objects-in-javascript – AT82 Apr 05 '17 at 15:45
  • this.Service.getData.subscribe(resp=>{ this.searchResults = resp.data; this.searchResults.forEach((x:any)=> { x.categories.forEach((y:any) => {object this.category=y.categoryid; console.log(this.category); }) }); this worked. but this one didn't work this.testService.post('search/getSearchResults',this.searchobj).subscribe(resp=>{ this.searchResults = resp.data; this.manipulatedata(); }) }); – Impromptu_Coder Apr 05 '17 at 16:17
  • Your second snippet of code is just wrong, so trash that. Your first one looks good, but instead of doing the foreach in the subscription, you could call a method and do the for each there instead, like my answer suggests. But it's not necessary. It's up to you. – AT82 Apr 05 '17 at 17:56