Issue in load Web API data in grid ionic framework - ionic2

Question

i m new in ionic and i want to load my web api data in grid ionic so below is my code.
grid.html
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Grid Demo</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-refresher (ionRefresh)="doRefresh($event)">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
<ion-grid>
<ion-row *ngFor="let product of products">
<ion-col width-50 >
<h1>{{product.title}}</h1>
</ion-col>
</ion-row>
</ion-grid>
<ion-infinite-scroll (ionInfinite)="doInfinite($event)">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
grid.ts
import { Component } from '#angular/core';
import { NavController, NavParams, LoadingController } from 'ionic-angular';
import { ProductListProvider } from '../../providers/product/product'
#Component({
templateUrl: 'grid.html',
providers:[ProductListProvider]
})
export class GridHttpPage {
public response: any;
public products: any =[];
public count: any;
public loader: any;
public page: number = 0;
public isLoading: boolean =true;
public totalItem: number ;
doRefresh(refresher) {
console.log('Begin async operation', refresher);
setTimeout(() => {
this.page=0;
this.loadData(true);
console.log('Async operation has ended');
refresher.complete();
}, 2000);
}
constructor(public navCtrl: NavController, public navParams: NavParams, public personListProvider: ProductListProvider, public loadingCtrl: LoadingController) {
this.count = 0;
this.loadData(this.isLoading);
}
presentLoading() {
this.loader = this.loadingCtrl.create({
// spinner: 'hide',
content: "Please wait...",
// duration: 3000,
// showBackdrop: true,
// enableBackdropDismiss: true,
// dismissOnPageChange: true
});
this.loader.onDidDismiss(() => {
// console.log('Dismissed loading');
});
this.loader.present();
}
loadData(isLoading) {
if(isLoading==true)
{
this.presentLoading();
}
this.page ++;
this.personListProvider.load(this.page)
.then(data => {
this.response = data;
this.totalItem = this.response.listing.total;
//this.products = this.response.listing.data;
for (let i = 0; i < this.response.listing.data.length; i++) {
this.products.push(this.response.listing.data[i]);
// console.log(this.response.listing.data[i]);
}
if(isLoading==true)
{
this.loader.dismiss();
}
console.log(this.response.listing);
console.log(this.products);
console.log(this.totalItem);
});
}
doInfinite(infiniteScroll) {
console.log('Begin async operation');
setTimeout(() => {
// for (let i = 0; i < 30; i++) {
// this.items.push( this.items.length );
// }
if(this.products.length <= this.totalItem )
{
this.loadData(false);
}
console.log('Async operation has ended');
infiniteScroll.complete();
}, 500);
}
}
When i run above code i get following type of output Refer screenshots.
GridView
It display single column list i want to display in 2 column so any idea how can i display in two column in gridview ionic?

Answer 1

I got solution
Make change in grid.ts file
rows: any;
in loadata funtion
loadData(isLoading) {
if(isLoading==true)
{
this.presentLoading();
}
this.page ++;
this.personListProvider.load(this.page)
.then(data => {
this.response = data;
this.totalItem = this.response.listing.total;
for (let i = 0; i < this.response.listing.data.length; i++) {
this.products.push(this.response.listing.data[i]);
}
this.rows = Array.from(Array(Math.ceil(this.products.length / 2)).keys());
if(isLoading==true)
{
this.loader.dismiss();
}
console.log(this.response.listing);
console.log(this.products);
console.log(this.totalItem);
});
}
in grid.html change as follows
<ion-grid>
<ion-row *ngFor="let i of rows">
<ion-col *ngFor="let product of products | slice:(i*2):(i+1)*2" width-50 (click)="openDetailPage(product)">
<ion-card>
<ion-avatar item-left>
<img src="{{product.medium_image}}" />
</ion-avatar>
<ion-card-content>
<ion-card-title>
<h6>{{product.title}}</h6>
<p> <b>Price: </b> {{product.price}}</p>
</ion-card-title>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>