CODEWITHSUNDEEP
angulartypescriptangular-material
spaceman
spaceman

Reputation: 649

Display data from array to multiple elements in HTML Angular 4

I'm trying to show a list of informations from an XML to a list using Angular 4 and Angular Material. I have already converted the XML to JSON and the JSON I retrieve is like this:

{
    "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"
            }

        ]

    }
}

this is my ts file: [i] is the id and id has dozens of entries.

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

this is my html file:

<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>

The thing is, the list has dozens of rows but it is showing the first only. My intention was to have all the items loaded on page. Already tried using *ngFor but it didn't work.

I know I might have missed something stupid but I've tried a lot and searched a lot but couldn't find a solution.

Thanks in advance

Upvotes: 0

Views: 5948

Answers (4)

Ampati Hareesh
Ampati Hareesh

Reputation: 1872

In your 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>

In your 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
      }
   });   
  }

//or use this instead of for loop
this.stackdata = Object.keys(this.stackjson).map((k) => this.stackjson[k][0])

And the json is the data that you had given

Here is the result : enter image description here

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

Upvotes: 1

Aditi Singh
Aditi Singh

Reputation: 117

You can create the model json with properties Id, Name, Address, Phone. Than create jsonList: json[] = [] specifying that list will be of type json object in your ts file and add your data into list.

Than in your 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>

It now will show all of your data.

Upvotes: 0

NicoLA
NicoLA

Reputation: 71

 <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>

I'm confused by your quest and your desired results but from what you are trying to do in the javascript seems like you could use the ngFor like this.

{ 
   "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"
                }     
        ]
    }

If you want to keep the data structure of the JSON, change html to this

<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>

Upvotes: 1

Ankit Kapoor
Ankit Kapoor

Reputation: 1754

Well, I guess you are not using the iterated object properties. You need to used *ngFor and assign that single iterated object to you list-item elements. As per your code snippet, you can simply paste given code: 

<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>

Main thing is you use your iterated object viz. item in this case.

Upvotes: 0

Related Questions