How to loop through object via click event in Angular/ TypeScript

Question

I have data coming via consuming Web API. I have two methods in component, load next and previous records. I want to load object data from iteration via click event and display it.

Component

export class NewResponseComponent implements OnInit {


 private view: BehaviorSubject<ConsulationResponsesIdListDataModel>;
 private responseCurrentState: ResponseCurrentStateDataModel;
 private responses: ConsulationResponsesIdListDataModel;

 private responseData = false;

     constructor(private dataService: ConsultationResponsesListDataService,
  private router: Router,
  private session: SessionStorageService){}

ngOnInit(): void {
  this.view = new BehaviorSubject<ConsulationResponsesIdListDataModel>(null);    
   this.loadData();
}

public loadData():void
{

  this.dataService.getConsultationResponsesList(this.responseCurrentState.consultationId, this.responseCurrentState.responseTypeId, this.responseCurrentState.responsesRequestedStatus)
     .subscribe(data =>{
          this.view.next(data);
          this.responses = data;
          this.responseData = true; 
     });
}

public loadNextResponse():void
{
    console.log("request for next response");
}


public loadPreviousResponse():void
{
  console.log("request for previous response");
}

following template shows all data in response object but I want to bind with loadNextResponse() and loadPreviousResponse() method in above component

Template

<div *ngIf='responseData'>
<div *ngFor="let response of responses" class="form-row">
   {{response.responseId}}
</div>

<button class="btn btn-default width-50 mb-xs" (click)="loadNextResponse()">Load Next Response</button>
<button class="btn btn-default width-50 mb-xs" (click)="loadPreviousResponse()">Load Previous Response</button>

I need to achieve something like this http://jsfiddle.net/h2G64/

Remove this.loadData(); from ngOnInit() and call it inside loadNextResponse() and loadPreviousResponse() — ElasticCode
– ElasticCode, Commented Apr 6, 2018 at 10:42
I am loading all the data at once not individually, hence need to do logic on front-end — K.Z
– K.Z, Commented Apr 6, 2018 at 10:44
yes, as I all the records in object, I need to loop one by one and for first instance, lets say display it — K.Z
– K.Z, Commented Apr 6, 2018 at 10:49

planet_hunter · Accepted Answer · 2018-04-06 12:00:24Z

1

Following code might work if I understood your problem correctly -

<div>
    <!-- <div *ngFor="let response of responses" class="form-row">
        {{response.responseId}}
    </div> -->
    {{responseItem}}
    <button [disabled]="!count || count <= 0" class="btn btn-default width-50 mb-xs" (click)=" count = count - 1; responseItem = responses[count]">Load Previous Response</button>
    <button [disabled]="!!count && count >= responses?.length - 1" class="btn btn-default width-50 mb-xs" (click)="count = count || 0; count = count + 1; responseItem = responses[count]">Load Next Response</button>
</div>

You will have to assign the first item to responseItem property when you get the response from server and then the button clicks will take over the navigation.

EDIT - Adding GIF of POC

check the following GIF of my POC -

Let me know if I missed anything.

I hope this helps :)

edited Apr 6, 2018 at 12:00

answered Apr 6, 2018 at 11:54

planet_hunter

3,9961 gold badge32 silver badges43 bronze badges

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

Comments

K.Z · Accepted Answer · 2018-04-09 11:05:23Z

I did this way

Component

  export class NewResponseComponent implements OnInit {

   private nums:number[] = [0,1,2,3,4,5,6,7,8,9];
   private currentResponseIndex=0;
   private currentResponse;

 public loadNextResponse(responseIndex: string):void
{

    this.currentResponseIndex = parseInt(responseIndex)+1;

    if(this.nums[this.currentResponseIndex]!=null)
    {
      this.currentResponse = this.nums[this.currentResponseIndex];
      console.log("response index  ",this.currentResponseIndex, "    response ", this.currentResponse);
    }
    else
    {
      this.currentResponseIndex = this.currentResponseIndex-1;
      console.log("reach to max length ", this.currentResponseIndex);
    }

}


public loadPreviousResponse(responseIndex: string):void
{

  this.currentResponseIndex = parseInt(responseIndex) - 1;
  if(this.currentResponseIndex<0)
  {
    this.currentResponseIndex = 0;
    console.log("reach to min length");
  }
  else
  {
    this.currentResponse = this.nums[this.currentResponseIndex];
    console.log("response index  ",this.currentResponseIndex, "    response ", this.currentResponse);
  }
}

Template

<div>
    <h1><span>response Index </span>{{currentResponseIndex}}</h1>
    <h1><span>response  </span>{{currentResponse}}</h1>

    <button class="btn btn-default width-50 mb-xs" id = "{{currentResponseIndex}}" (click)="loadNextResponse(currentResponseIndex)">Load Next Response</button>
    <button class="btn btn-default width-50 mb-xs" id = "{{currentResponseIndex}}" (click)="loadPreviousResponse(currentResponseIndex)">Load Previous Response</button>
</div>

Collectives™ on Stack Overflow

How to loop through object via click event in Angular/ TypeScript

Component

Template

2 Answers 2

Comments

Component

Template

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Component

Template

2 Answers 2

Comments

Component

Template

Comments

Your Answer

Sign up or log in

Post as a guest

Related