Angular 5 Looping through array of objects

0
votes

I Have a server response, consisting of an object and array of objects like below:

{
    "bookNumber": "123214",
    "Desc": "book desc",
    "title": "title here",
    "published": "12/01/2016",
    "author": {
        "authorname": "VictorA"
    },

    "Category": [{
        "genere": "Type1",
        "number": "2331",
        "sesction": "Fiction"
    }, {
        "genere": "type2",
        "number": "430359",
        "sesction": "Kids"
    }, {
        "genere": "type2",
        "number": "436430",
        "sesction": "Kids"
    }, {
        "genere": "type2",
        "number": "123914",
        "sesction": "Kids"
    }],

    "Publisher": [{
        "name": "Pubbook",
        "pubId": "81.25402-0233",
        "lastModified": "2012-02-09"
    }]
}

On the component i subscribe to the Observable from the service like below:

this.myService.getDetails(id).subscribe (data => {  
      this.resp = data;
      console.log (JSON.stringify(this.resp));
    })

in the HTML:

I'm using *ngFor to loop through response like below:

<div class="panel-group" id="accordion">
    <div class="panel panel-default" id="panel1">
        <div class="panel-heading">
             <h4 class="panel-title">
        <a data-toggle="collapse" data-target="#collapseOne" 
           href="#collapseOne">
          Book
        </a>
      </h4>

        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body"></div>
            {{bookNumber}}
            ...so on
        </div>
    </div>
    <div class="panel panel-default" id="panel2">
        <div class="panel-heading">
             <h4 class="panel-title">
        <a data-toggle="collapse" data-target="#collapseTwo" 
           href="#collapseTwo" class="collapsed">
          Documents
        </a>
      </h4>

        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body" *ngFor = "let item of resp.Category"></div>
            // here How can I  extract items based on genere type e.g. Type1 <div col="md-6"> {{items of Type1 genere}} {{}}</div>
            //  Type2 <div col="md-6">{{items of Type2 genere}}</div>

            I want to display details of each Genere in separately and update on selection for e.g. when i click Number 2331 get details of that object, and same for 4302359
        </div>
    </div>

</div>

How to loop over Category array based on Genere Type(1,2...etc) and update details of each item once user click on number?

2
angular
Try to transform the data coming from your server to a data structure that suits you. – Anis Tissaoui
@AnisTissaoui, can you provide an example? :) – Nico Levi
Edit the post and provide more explanations. I don't get why you subscribe and get data and then you assign it to this.resp but then you log this.items that i know nothing about. – Anis Tissaoui
Thank you, I edited console.log it was wrong...I subscribe to observable then assign it to this.resp to iterate over the object – Nico Levi
Is the object you provided is the complete response of the server ? or a part of it ? – Anis Tissaoui

2 Answers

0
votes

You need to leverage *ngIf directive to render specific template and then to pass item data via your method on click/tap:

<div id="collapseTwo" class="panel-collapse collapse">
  <div class="panel-body" *ngFor="let item of resp.Category" (click)="itemTapped(item)">
      <div *ngIf="item.type ==='Type1'"></div>
      <div *ngIf="item.type ==='Type2'"></div>
  </div>
</div>

Please also make sure you adopt certain coding conventions about var names etc. Your code shared is full of typos and white spaces etc which is really risky;)

Addition: if you want to only show certain categories it really depends on whether you want a user to be able to filter data or if it is up to your app.

If it is just the app just render what you want using *ngIf condition.

<div id="collapseTwo" class="panel-collapse collapse">
  <div class="panel-body" *ngFor="let item of resp.Category" (click)="itemTapped(item)">
      <div *ngIf="item.type ==='Type1'"></div>
  </div>
</div>

if it us user controlled - describe your specific User Experience. I would recommend this article: https://www.joshmorony.com/high-performance-list-filtering-in-ionic-2/

0
votes

You can do it by using GroupBy.

GroupBy pipe returns an object of a key/value pair. https://github.com/danrevah/ngx-pipes#groupby

You need to install the ngx-pipes first, installation process: https://github.com/danrevah/ngx-pipes#installation

Below is the sample piece of code that works perfectly for your data structure:

 <div class="panel-body" *ngFor="let item; of resp.Category | groupBy: 'genere' | pairs">
   <h2> {{item[0]}}</h2>
   <div col="md-6" *ngFor="let i of item[1]">
     {{i.number}}, {{i.sesction}}
   </div>
 </div>

For reference you can check a similar thing here: https://github.com/danrevah/ngx-pipes/issues/33#issuecomment-284863058