J'essaie d'afficher une liste d'informations d'un XML à une liste en utilisant Angular 4 et Angular Material. J'ai déjà converti le XML en JSON et le JSON que je récupère est comme ceci:

{
    "json": {

        "0": [{
                "Name": "John",
                "Address": "5th street",
                "Phone": "555-123-456"
            }

        ],
        "1": [{
                "Name": "Mary",
                "Address": "4th street",
                "Phone": "555-654-321"
            }

        ],
        "2": [{
                "Name": "Harry",
                "Address": "3th street",
                "Phone": "555-124-231"
            }

        ]

    }
}

Ceci est mon fichier ts : [i] est l'identifiant et l'identifiant contient des dizaines d'entrées.

for (let i = 0; i< json.length; i++){
              this.name = json[i]['Name'];
              this.address = json[i]['Address'];
              this.phone = json[i]['Phone'];
 }

Voici mon fichier html :

<mat-list>
  <h3 mat-subheader>Your info</h3>
  <mat-list-item>
    <h2 mat-line>Your name is: <b>{{name}}</b></h2>
    <p mat-line> Your address is: <b> {{address}} </b></p>
    <p mat-line> Your phone is: <b> {{phone}} </b></p>
  </mat-list-item>
  <mat-divider></mat-divider>
</mat-list>

Le fait est que la liste comporte des dizaines de lignes, mais elle ne montre que la première. Mon intention était d'avoir tous les éléments chargés sur la page. J'ai déjà essayé d'utiliser *ngFor mais cela n'a pas fonctionné.

Je sais que j'ai peut-être manqué quelque chose de stupide, mais j'ai beaucoup essayé et beaucoup cherché mais je n'ai pas trouvé de solution.

Merci d'avance

0
spaceman 17 nov. 2017 à 22:22

4 réponses

Meilleure réponse

Dans votre html

<mat-list>
    <h1 mat-subheader>Your info</h1>
    <mat-list-item *ngFor="let stack of stackdata">
      <h2 mat-line>Your name is: <b>{{stack.Name}}</b></h2>
      <p mat-line> Your address is: <b> {{stack.Address}} </b></p>
      <p mat-line> Your phone is: <b> {{stack.Phone}} </b></p>
    </mat-list-item>
    <mat-divider></mat-divider>
</mat-list>

Dans tes ts

stackjson : any
stackdata  = []
  ngOnInit() { // or in a method where you are getting the data..
   this.dataService.
   getData().subscribe(res => {
    this.stackjson=res.json().json;
    console.log(this.stackjson);
    for(let index in this.stackjson) 
      {
        //console.log(this.stackjson[index][0]);
        this.stackdata.push(this.stackjson[index][0]); //using this array to display data
      }
   });   
  }

// ou utilisez ceci au lieu de la boucle for
this.stackdata = Object.keys (this.stackjson) .map ((k) => this.stackjson [k] [0])

Et le json est les données que vous aviez données

Voici le résultat: entrez la description de l'image ici

Ajout de plnkr: https://plnkr.co/edit/8lINUBWerEnVtF9BWIAj?p=preview

1
Ampati Hareesh 20 nov. 2017 à 19:11

Eh bien, je suppose que vous n'utilisez pas les propriétés d'objet itérées. Vous devez utiliser * ngFor et attribuer cet objet itéré unique à vos éléments d'élément de liste. Selon votre extrait de code, vous pouvez simplement coller le code donné:

<mat-list>
  <h3 mat-subheader>Ypur info</h3>
  <mat-list-item *ngFor="let item of jsonPosicao">
    <mat-icon mat-list-icon>directions_car</mat-icon>
    <h2 mat-line>Your name is: <b>item.Name</b></h2>
    <p mat-line> Your address is: <b>item.Address</b></p>
    <p mat-line> Your phone is: <b>item.Phone</b></p>
  </mat-list-item>
  <mat-divider></mat-divider>
</mat-list>

L'essentiel est que vous utilisiez votre objet itéré à savoir. article dans ce cas.

0
Ankit Kapoor 17 nov. 2017 à 19:45

Vous pouvez créer le modèle json avec les propriétés Id, Nom, Adresse, Téléphone. Ensuite, créez jsonList: json[] = [] en spécifiant que la liste sera de type objet json dans votre fichier ts et ajoutez vos données dans la liste.

Que dans votre html

<mat-list>
  <h3 mat-subheader>Your info</h3>
  <mat-list-item *ngFor="let info of jsonList">
    <h2 mat-line>Your name is: <b>{{info.Name}}</b></h2>
    <p mat-line> Your address is: <b> {{info.Address}} </b></p>
    <p mat-line> Your phone is: <b> {{info.Phone}} </b></p>
  </mat-list-item>
  <mat-divider></mat-divider>
</mat-list>

Il affichera maintenant toutes vos données.

0
Aditi Singh 19 nov. 2017 à 11:43
 <mat-list-item *ngFor="let posicao of jsonPosicao ">
    <mat-icon mat-list-icon>directions_car</mat-icon>
    <h2 mat-line>Your name is: <b>{{posicao.name}}</b></h2>
    <p mat-line> Your address is: <b> {{posicao.address}} </b></p>
    <p mat-line> Your phone is: <b> {{posicao.phone}} </b></p>
 </mat-list-item>

Je suis confus par votre quête et vos résultats souhaités, mais d'après ce que vous essayez de faire dans le javascript, il semble que vous puissiez utiliser le ngFor comme ça.

{ 
   "json": [
            {
                    "Id":"1",
                    "Name": "John",
                    "Address": "5th street",
                    "Phone": "555-123-456"
                }
            ,
            {
                    "Id":"2",
                    "Name": "Mary",
                    "Address": "4th street",
                    "Phone": "555-654-321"
                }
            ,
            {
                    "Id":"3",
                    "Name": "Harry",
                    "Address": "3th street",
                    "Phone": "555-124-231"
                }     
        ]
    }

Si vous souhaitez conserver la structure de données du JSON, remplacez html par ceci

<mat-list-item *ngFor="let posicao of jsonPosicao ">
    <mat-icon mat-list-icon>directions_car</mat-icon>
    <h2 mat-line>Your name is: <b>{{posicao[0].name}}</b></h2>
    <p mat-line> Your address is: <b> {{posicao[0].address}} </b></p>
    <p mat-line> Your phone is: <b> {{posicao[0].phone}} </b></p>
</mat-list-item>
1
NicoLA 17 nov. 2017 à 22:11
47357864