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

Improve this question

2 Answers 2

Reset to default
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

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

5 Comments

Thanks. But I'm sorry I want to do this in typescript.
@Impromptu_Coder I've added it ;)
@Impromptu_Coder it's in my answer, the second part
@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.
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.
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

Improve this answer

4 Comments

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?
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 :) stackoverflow.com/questions/15125920/…
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(); }) });
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.