Fill item/card dynamically problem

Ionic Framework ionic-v3
1

Hy :grinning:,
I’ve got somme problem with fill my page with item dynamicaly.

The HTML page

<ion-header>
  <ion-navbar>
    <ion-title>Other</ion-title>
  </ion-navbar>
</ion-header>


<ion-content class="cards-bg">
<button io-button ion-card ion-item *ngFor=" let item of items" (click)="itemSelected(item)">
<ion-card-header >
   <ion-icon name="square" [color]="colActi(item)" ></ion-icon>
 {{item.CLI_NOM}}
  </ion-card-header>

  <ion-card-content>
  	
    {{item.CLI_VILLE}}
    {{item.CLI_ACTIF}}
  </ion-card-content>

</button>
</ion-content>

And so when i do that it works :

import { Component } from '@angular/core';

import { NavController, NavParams } from 'ionic-angular';
var itm;

@Component({
  templateUrl: 'other.html',
})
export class OtherPage {
  items ;

   constructor(params: NavParams, navController: NavController){
     this.trucbidule();
   //for (i = 0; i < itm.length; i++) {
     this.items = itm;
}
//}
  itemSelected(item: string) {
    console.log("Selected Item", item);
  }

  
  colActi(item){
    
    if (item.CLI_ACTIF == 'P'){
      return 'primary';
    }
    else if (item.CLI_ACTIF == 'I'){
      return 'danger';
    }
    else {
       return 'grass';}

  
    } 
  

trucbidule(){
 itm = [
{"CLI_CODE":"001537","CLI_NOM":"RESTAURANT LA MASCOTTE","CLI_ADR1":"NULL","CLI_ADR2":"GRD","CLI_ADR3":"NULL","CLI_POSTAL":"474100","CLI_VILLE":"GREZY NEILLE" ,"CLI_CORRES" :"NULL", "CLI_ACTIF":"I"},
{"CLI_CODE":"000232","CLI_NOM":"(98) MFIN","CLI_ADR1":"PROCLUB","CLI_ADR2":" RUE JEAN CEAU","CLI_ADR3":"NULL","CLI_POSTAL":"52840","CLI_VILLE":"SLAVAL" ,"CLI_CORRES" :"MR GAR","CLI_ACTIF":"P"},
{"CLI_CODE":"000887","CLI_NOM":"DE JAOENE","CLI_ADR1":"SAS JEUD","CLI_ADR2":"3 RUE DE COUENN","CLI_ADR3":"NULL","CLI_POSTAL":"35783","CLI_VILLE":"JAOENE","CLI_CORRES" :"MME JEULD","CLI_ACTIF":"O" },
{"CLI_CODE":"000988","CLI_NOM":"LE LION D'OR","CLI_ADR1":"MINIQUE","CLI_ADR2":"5 PLACE DE L'EGLISE","CLI_ADR3":"NULL","CLI_POSTAL":"79210","CLI_VILLE":"BAISI","CLI_CORRES" :"MR AET","CLI_ACTIF":"O"},
{"CLI_CODE":"001139","CLI_NOM":"SAINT NICOLAS","CLI_ADR1":"NULL","CLI_ADR2":" AMBROISE PAVE","CLI_ADR3":" BLANC" ,"CLI_POSTAL":"45871",",CLI_VILLE":" AERS" ,"CLI_CORRES" :"D.V","CLI_ACTIF":"O"},
{"CLI_CODE":"001142","CLI_NOM":"RESIDENCE","CLI_ADR1":"NULL" ,"CLI_ADR2":"56 RUE DEPIERRE","CLI_ADR3":"NULL" ,"CLI_POSTAL":"53050" ,"CLI_VILLE":"LAVALOT","CLI_CORRES" :"NULL","CLI_ACTIF":"I"},
];
}

But when I use exactly the same syntax for the request It doesn’t work…
The result of the request is an array of object and it’s the same syntax of the “itm” 's first example value.

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
declare var SqlServer: any;
var itm;
var temp;
var items;
@Component({
  templateUrl: 'other.html',
})
export class OtherPage {
items;

  constructor(params: NavParams, navController: NavController){
    this.trucbidule();
    this.items = itm;
  }

  itemSelected(item: string) {
    console.log("Selected Item", item);
  }

  colActi(item){
    if (item.CLI_ACTIF == 'P'){
      return 'primary';
    }
    else if (item.CLI_ACTIF == 'I'){
      return 'danger';
    }
    else {
       return 'grass';}
  }

  trucbidule(){
    SqlServer.executeQuery("SELECT TOP 15 CLI_NOM, CLI_TEL1, CLI_TEL2, CLI_VILLE, CLI_ACTIF FROM GCCLIENT ORDER BY CLI_NOM", function(event) {
    alert(JSON.stringify(event));
    itm = JSON.stringify(event);
  }, function(error) {
    alert("Error : " + JSON.stringify(error));
  }); }
}

My Ionic Info, also I use a samsung galaxy A3 2016

Capture

If someone can help me ! That will save my life.

Thanks

2

I don’t think your code even compile no? you use itm but this variable is never declared

Also it seems that you mix up class variables (item which is available for the all class) and local variable (itm which is only usefull where it’s declared, if it is)

Correct 1:

 constructor(params: NavParams, navController: NavController){
     this.trucbidule();
 }

Correct 2:

 trucbidule(){
    this.items =  {"CLI_CODE":"001537","CLI_NOM":"RESTAURANT LA ...];
}

Correct 3:

 trucbidule(){
     SqlServer.executeQuery("SELECT TOP 15 CLI_NOM, CLI_TEL1, CLI_TEL2, CLI_VILLE, CLI_ACTIF FROM GCCLIENT ORDER BY CLI_NOM", (event) => {
           this.items = event;
    }, function(error) {
         alert("Error : " + JSON.stringify(error));
         this.items = new Array();
 }); }

Also note the modification I did in your callback. Declaring a callback like function(event) is a javascript way, in typescript do (event) =>

1 Like
3

It works ! Thanks a lot @reedrichards,
itm was declare before ‘@Component’ ,
The code compiled but when it arrived on the part of “this.items = itm” it crashed.

1 Like