How to loop through a array returned from a API in Ionic3 framework

Question

Am having a huge array in the below format which is returned from an API, I need to loop through it and display in the mobile app. Is there a way I can do this in angular2 ( am a newbie)

The reason why I am not using JSON format is because since the data is huge it returns no data when I run it in postman, hence am thinking to directly loop through an array in Ionic 3 framework and Angular2

  Array
  (
    [0] => Array
        (
        [SubjectID] => 16
        [QuestionID] => 4358
        [QuestionType] => 
        [Question] => Which one is a wrong statement?
        [Answer1] => some answer1.
        [Answer2] => some answer2
        [Answer3] => some answer3
        [Answer4] => some answer4
        [CorrectAnswer] => 4
        [Hint] => 
        [DiffLevel] => Medium
        [Status] => Active
        [AnsDescription] => some description. 
   )

 [1] => Array
    (
        [SubjectID] => 16
        [QuestionID] => 4359
        [QuestionType] => SingleAnswer
        [QuestionType] => 
        [Question] => Which one is a wrong statement?
        [Answer1] => some answer1.
        [Answer2] => some answer2
        [Answer3] => some answer3
        [Answer4] => some answer4
        [CorrectAnswer] => 4
        [Hint] => 
        [DiffLevel] => Medium
        [Status] => Active
        [AnsDescription] => some description
    )

 )

This is my .ts file: import { Component } from '@angular/core'; import { NavController } from 'ionic-angular';

 @Component({
 selector: 'page-about',
 templateUrl: 'about.html'
 })
 export class AboutPage {
 items:any[];

 constructor(public navCtrl: NavController) {
 }

 this.items =  
}

Please help me with this , I need to find a way to loop through this data and display it in the app. Thanks in advance !! Looking forward to some answers.

M Shafique · Accepted Answer · 2018-01-18 11:28:25Z

1

<div *ngFor="let item of items">
    <div [(ngModel)]="item.QuestionID"> {{item.Question}} </div>
</div>

In Class Function you can use 
this.items.forEach((item, index) => { ... })

answered Jan 18, 2018 at 11:28

M Shafique

8168 silver badges18 bronze badges

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

Comments

Tobias Etter · Accepted Answer · 2017-05-31 09:08:02Z

0

Why dont u use the keys in the frontend:

<div *ngFor="#elem of data">
    <div [(ngModel)]="elem.SubjectId"
</div>

Or you can use data.forEach(elem => { ... }) function

answered May 31, 2017 at 9:08

Tobias Etter

7741 gold badge6 silver badges20 bronze badges

1 Comment

user5418103 Over a year ago

@Tobias..Thanks for that, I just updated the question with my typescript file, to just check if it works correctly , can i assign my array to items in export class and use the *ngFor in my ".html" file?

Collectives™ on Stack Overflow

How to loop through a array returned from a API in Ionic3 framework

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