Display Array from Json file withe Ionic

Ionic Framework ionic-v3
1

Hello All, I’m a biginner with Ionic. I’m trying to implement a web service in my Mobile application. My Http request return me a Json file organised like this.

[
{
“Nomentreprise”: “”,
“Observation”: “”,
“uidauteur”: “”,
“title”: “”
},
{
“Nomentreprise”: “”,
“Observation”: “”,
“uidauteur”: “”,
“title”: “”
},
]
I’m able to return the datas by a console log. But i can’t display them on a HTLM page.
Please can you Help?

Before this, i managed to display datas on a HTLM page, but the web service returned a json file organised like this

{
{
“Nomentreprise”: “”,
“Observation”: “”,
“uidauteur”: “”,
“title”: “”
},
{
“Nomentreprise”: “”,
“Observation”: “”,
“uidauteur”: “”,
“title”: “”
},
}
The difference is the array. Don’t know how to display array.

2

@nicanorngouan The JSON response is simply array. So store it in some variable in component and then use for cycle in template

let responseArray: Array<any> = yourResponseFromJson

<ion-list>
    <ion-item *ngfor="let d of responseArray">
           {{d.title}}
    </ion-item>
</ion-list>
3

Thank very much mcihak. I’m a very biginner… :slight_smile: so i d’ont know where i have to this code
‘let responseArray: Array = yourResponseFromJson’

On services.ts or my home.ts?

**

Home.ts

**

import { Component } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;

import { AvisGlobal } from ‘…/…/models/global.model’;
import { Avis } from ‘…/…/models/avis.model’;
import { ConsumapWebService } from ‘…/…/services/webservice.service’;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {

news: AvisGlobal = new AvisGlobal();

constructor(public navCtrl: NavController, private consumapWebService: ConsumapWebService) {

this.getObjects(null);

}

public getObjects(refresher) {
this.consumapWebService.getObjects()
.then(newsFetched => {
this.news = newsFetched;

// Si la variable refresher est null alors on ne fait rien
(refresher) ? refresher.complete() : null;

console.log(this.news);

});

}

}

**

Service.TS

**

// Core components
import { Injectable } from ‘@angular/core’;
import { Http } from ‘@angular/http’;

// RxJS
import ‘rxjs/add/operator/toPromise’;
import ‘rxjs/add/operator/map’;

// Models
import { AvisGlobal } from ‘…/models/global.model’;
import { Avis } from ‘…/models/avis.model’;

@Injectable()
export class ConsumapWebService {

private baseUrl: string = 'URL';
private endPoint: string = '/liste_avis';


constructor(private http: Http) { }

public getObjects(): Promise<AvisGlobal> {
	const url = `${this.baseUrl}${this.endPoint}`;
    
    return this.http.get(url)
    .toPromise()
    .then(response => response.json())
    
    
    .catch(error => console.log('Une erreur est survenue ' + error))
}

}

4

You have to place it in component which belongs to template where you want to show data.

Or you can place it somewhere else, but you have to somehow send the data to proper component. But for now is easiest way to place it like I mention before.

5

Please edit your post, it is not very readable at the moment.
Use the </> button above the input field to format your code, command line output or error message (select the text first, then click the button or wrap it in ``` manually). Check the preview if it looks better. This will make sure your text is readable and if it recognizes the programming language it also automatically adds code syntax highlighting. Thanks.