Create background image card automatically with a json file

Ionic Framework ionic-v3
1

Hello
I need help because I can not find the solution
I created the php script to convert my sql database to json and I would like after having recuperated my data in my page, automatically create with my json data file
I want it because I create a list of sub category and I would like it to show me the sub categories in this form.

image
dkjkfj.JPG390×706 58.6 KB

thank you

2

Can you show the code you have tried, or be more specific.
Are you looking for the html code to show the data or the typescript code to get your json data?

3

home.html

> <ion-content class="card-background-page" class="no-scroll">
>  <ion-card  (click)="nextPage(SouscatPage)">
>     <img src="img/alimentation.jpg"/>
>     <div class="card-title">Alimentation</div>
>   </ion-card>
>   <ion-card>
>     <img src="img/automobile.jpg"/>
>     <div class="card-title">Automobile</div>
>   </ion-card>
>   <ion-card>
>     <img src="img/beaute.jpg"/>
>     <div class="card-title">Beauté</div>
>   </ion-card>
>   <button ion-button (click)= "nextPage();"> nextPage </button>
> </ion-content>

i would see my data in ion card automatically

and my script php to convert my data base in json

<?php
require_once("connect_bdd.php");
$ps=$PDO->prepare("SELECT * FROM souscategorie");
$ps->execute();
$liste=$ps->fetchAll(PDO::FETCH_ASSOC);
$data=array();
foreach ($liste as $i => $v) {
  $fields=array();
  foreach ($v as $key => $value) {
    $fields[$key] = utf8_encode($value);
    # code...
  }
  $data[$i]=$fields;
  # code...
}
header("Access-Control-Allow-Origin: *");
header("Content-Type:application/json; charset=utf-8");
echo(json_encode($data));
?>
4

The html would something like this…

<ion-content class="card-background-page" class="no-scroll">
  <ion-card *ngFor="let item of items">
    <img [src]="item.image"/>
    <div class="card-title">{{item.title}}</div>
  </ion-card>
</ion-content>

Do you have the typescript code to get your json data? Or are you also looking for that?

5

I get my Json data with the reddit method
this.http.get(‘https://www.reddit.com/r/gifs/new/.json?limit=10’).map(res => res.json()).subscribe(data => {
this.posts = data.data.children;
});

6

can you show what you have in your .ts file so far.

7 
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { HomePage } from '../home/home'
import { RedditData } from '../../providers/reddit-data'

/*
  Generated class for the Souscat page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  selector: 'page-souscat',
  templateUrl: 'souscat.html'
})
export class SouscatPage {

  constructor(public navCtrl: NavController, public navParams: NavParams , public redditService: RedditData) {
}

  ionViewDidLoad() {
  this.redditService.getRemoteData();
    /*console.log('ionViewDidLoad SouscatPage');*/
  }

}

reddit-data.ts
import { Injectable } from ‘@angular/core’;
import { Http } from ‘@angular/http’;
import ‘rxjs/add/operator/map’;

/*
Generated class for the RedditData provider.

See https://angular.io/docs/ts/latest/guide/dependency-injection.html
for more info on providers and Angular 2 DI.
*/
@Injectable()
export class RedditData {

constructor(public http: Http) {
console.log(‘Hello RedditData Provider’);
}
getRemoteData(){

this.http.get (‘http://localhost/Project/bdd_test_ionic/souscat.php’).map(res => res.json()).subscribe( data => {
console.log(data);
});

}

}

8

This should help, it is using Reddit API.