How to read json file in a template

Ionic Framework ionic-v3
1 
{
0: "AKERMI##1988",
5: "AKIM DE DUCOR##2005",
6: "AL FATIH##2003",
9: "AMER##1984",
13: "BELAMER##2004",
15: "CHAHATA##1990",
20: "CHARH##1999",
23: "CHEIKH EL ARAB##1990",
24: "DAHESS##1999",
35: "DARIKE##1991",
44: "DARMAN##1998",
50: "DAYJUR##1991",
51: "DJARNI DES FORGES##1995",
55: "DJELMANE##1999",
77: "DJOURDAN##1999",
83: "DORMANE##1984",
103: "FARADJALA##1993",
105: "GITPEN##1994",
110: "HAJJAM##1995",
175: "HAKIM DU BAC##1995",
180: "HALIM##1995",
185: "HAMID##1996",
194: "HAMZA##1995",
204: "HYRAM##1995",
206: "ISSAOUI##1996",
210: "JAMAK##1997",
213: "JEDEL##1997",
231: "JESROY DE CHAILLAC##1997",
232: "KAHLOUN##1998",
233: "KERBELLA##1992",
236: "LATHLETH##1999",
246: "MAJD AL ARAB##2002",
251: "MAKZAN##1991",
258: "MANGANELLO##1990",
259: "MANGUIER DE PIBOUL##1995",
263: "MAYSOUN##2000",
266: "MIGYESS##2000",
269: "MOUSSOUL##2000",
324: "MUNEEF##2001",
334: "NADIM##2001",
336: "NAKKACH##2001",
337: "NEDJAM LOTOIS##1996",
338: "NEMROD DU PAON##2001",
345: "NEZ D'OR##1997",
346: "NIZAM##1998",
348: "ORIENT EXPRESS##1995",
349: "OUAAD##2003",
350: "PHARAON DES CEDRES##2000",
351: "RAAD##2003",
357: "RAEEH##2003",
358: "RAFII##2003",
366: "ROUSHAAN##2003",
371: "SAMIR##1985",
391: "SARKI D'ESPIENS##1992",
392: "SAYAF##2004",
398: "SEMAOU'EL##2004",
400: "SOUR##1985",
404: "SULTAN AL BADR##2004",
405: "TIDJAM LOTOIS##1999",
433: "TOUWAYSSAN##1986",
434: "VENT DREDY##1992",
435: "VIOLET##2001",
436: "ZEIDOUN##1987"
}

test.html

  <ion-list>
        <button ion-item *ngFor="let item of etalon" >
                {{ item[0]}}
    </button>

  </ion-list>

test.ts

  getDataEtalon() {
   
    return  this.data.getEtalon()
            .subscribe(
                  data=> {
                        this.etalon = data;
                         console.log(this.etalon);
                         }  );                 
                  }
}

Exception
Cannot find a differ supporting object ‘[object Object]’ of type ‘object’. NgFor only supports binding to Iterables such as Arrays.

2

You have a wrong JSON format.

It should be something like;

{
“firstName”: “John”,
“lastName”: “Smith”,
“isAlive”: true,
“age”: 25,
“address”: {
“streetAddress”: “21 2nd Street”,
“city”: “New York”,
“state”: “NY”,
“postalCode”: “10021-3100”
}
}

3

The error message seems pretty clear to me. You are feeding ngFor an object. It wants an array instead, so somehow you need to turn this object into an array. You’re the only one that knows what that array should look like.

1 Like