GET request result display on application

hello, im new to ionic. i try so many time but i dont know how to display in html for get status. here my code.

html

<ion-col>
      <ion-item>
          <ion-select [(ngModel)]="statusReport" name="status" placeholder="Select status">
            <ion-option>reported</ion-option>
            <ion-option>acknowledged</ion-option>
            <ion-option>resolved</ion-option>
            <ion-option>false</ion-option>
          </ion-select>
      </ion-item>
    </ion-col>

      <ion-col>
          <button ion-button icon-only (click)="checkStatus()">
              <ion-icon name="search"></ion-icon>
            </button>
        </ion-col>

    <ion-list>
      <ion-item>
          <h2>{{data_reportid}}</h2>
          <h3>{{data_category}}</h3>
          <h4>{{time}}</h4>
          <p>{{data_address}}</p>
      </ion-item>
    </ion-list>

TS

checkStatus() {
    this.historyService.status(this.statusReport).then((result) => {
        console.log(result);
    }, (err) => {
        console.log(err);
    });
  }

GET request

status(statusReport){
  return new Promise((resolve, reject) => {
  let headers = new Headers();
      headers.append('access-token', '888888888888888');

  let apiUrl = 'https://api?data_userid=8888888888&data_status=';
      this.http.get(apiUrl + statusReport, {headers: headers})
      .subscribe(res => {
        resolve(res.json());
      }, (err) => {
        reject(err);
        console.log(err)
      });
    });
  }

What exactly it the problem?
Showing the result of the GET-request or something else?

sorry @MattE if not clear question. the problem is, in the console.log( ) it show my code working . it show that i get the data from platform. but i want to display it in my app. it failed. nothing display on my <ion - list> maybe my .html wrong or .ts code wrong.

Show your HTML-code where the data should be displayed and the code where you save the result of your request.

here the code for display

history.html

<ion-content>

      <ion-grid>
        <ion-row>
      
      <ion-col>
      <ion-item>
          <ion-select [(ngModel)]="statusReport" name="status" placeholder="Select status">
            <ion-option>reported</ion-option>
            <ion-option>acknowledged</ion-option>
            <ion-option>resolved</ion-option>
            <ion-option>false</ion-option>
          </ion-select>
      </ion-item>
    </ion-col>

      <ion-col>
          <button ion-button icon-only (click)="checkStatus()">
              <ion-icon name="search"></ion-icon>
            </button>
        </ion-col>

    </ion-row>
    </ion-grid>

  
    <ion-list>
      <ion-item>
          <h2>{{data_reportid}}</h2>
          <h3>{{data_category}}</h3>
          <h4>{{time}}</h4>
          <p>{{data_address}}</p>
      </ion-item>
    </ion-list>
    
</ion-content>

and this code for history.ts

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import  { HistoryServiceProvider } from '../../providers/history-service/history-service';

/**
 * Generated class for the HistoryPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@Component({
  selector: 'page-history',
  templateUrl: 'history.html',
})
export class HistoryPage {

  statusReport = '';
  status : any;

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public historyService: HistoryServiceProvider
  ) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad HistoryPage');
    
  }

  checkStatus() {
    this.historyService.status(this.statusReport).then((result) => {
        console.log(result);
    }, (err) => {
        console.log(err);
    });
  }

}

and this what i get console.log ( )

for provider the history-service.ts code u can see above. my GET request code.

for history-service.ts code

status(statusReport){
  return new Promise((resolve, reject) => {
  let headers = new Headers();
      headers.append('access-token', '8888');

  let apiUrl = 'https://api?data_userid=&data_status=';
      this.http.get(apiUrl + statusReport, {headers: headers})
      .subscribe(res => {
        resolve(res.json());
      }, (err) => {
        reject(err);
        console.log(err)
      });
    });
  }

you only have one row defined in the html…

what do you want it to look like?

create a little text file and paste that here so we can see. no real data… just some text

So the output UI should be look like this:


ID

category

location
date

ID

category

location
date

ID

category

location
date

Or look like this

11%20AM

ok, you just need to tell the code to generate a section per document in the docs array
assuming the variable in the the ts is

var docs: any;

and you converted the json to a array of objects

this.historyService.status(this.statusReport).then((result) => {
        console.log(result);
        docs=JSON.parse(result);

then

 <ion-list>
      <ion-item *ngFor="let document of docs">
          <h2>{{document.data_reportid}}</h2>
          <h3>{{document.data_category}}</h3>
          <h4>{{document.time}}</h4>
          <p>{{document.data_address}}</p>
      </ion-item>
    </ion-list>

if u want that separator line, you will have to add another html element to generate that inside the ion-item

1 Like