Display data from array to multiple elements in HTML Angular 4

Question

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

I believe you are getting confused over iterating in ts file will get reflected in html...the thing is use ngFor over the jsonPosicao...as in ts file your are keep on assigning the values to same variable ..which will finally hold the last item...so it can show only one item — Ampati Hareesh
– Ampati Hareesh, Commented Nov 17, 2017 at 19:45
Please clarify "Already tried using *ngFor but it didn't work." — Aluan Haddad
– Aluan Haddad, Commented Nov 17, 2017 at 19:52
I have updated the question with the json I retrieve so you understand why the [i]['Name'] — spaceman
– spaceman, Commented Nov 17, 2017 at 20:26

Ampati Hareesh · Accepted Answer · 2017-11-20 19:11:24Z

1

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 :

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

edited Nov 20, 2017 at 19:11

answered Nov 19, 2017 at 10:55

Ampati Hareesh

1,8721 gold badge18 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

spaceman Over a year ago

Thanks for the answer! Can you post the full code you used in plunker or jsfiddle? What is dataService in this context? Thanks!

Ampati Hareesh Over a year ago

I saved your json content under assets folder , i used dataService to fetch data from assets/stack.json . will put in plunker/fiddle and let you know by 11:00pm IST once after going to room .Thanks

Ampati Hareesh Over a year ago

Let me know what error you are facing when following the above method

Ampati Hareesh Over a year ago

Added plunker url !!! Assigned your json input to input varaible and storing the input.json to stackjson[in plunker] instead of using dataService[which i used in my host]

spaceman Over a year ago

Highly appreciated!!! Any idea of how I display childs? For example if the Phone has a child that starts with another 0 and then Phone1, Phone2 and Phone3. Can't display them doing {{stack.Phone.0.Phone1}}. Any idea on how to proceed?

|

NicoLA · Accepted Answer · 2017-11-17 22:11:29Z

1

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

edited Nov 17, 2017 at 22:11

answered Nov 17, 2017 at 19:40

NicoLA

718 bronze badges

3 Comments

spaceman Over a year ago

That didn't work, but thanks for the try. I have updated the question with the json I retrieve so you understand why the [i]['Name']

NicoLA Over a year ago

Do you have the ability to change the structure of your JSON before retrieving the data?

spaceman Over a year ago

Hey @NicoLA I can't modify the JSON structure as I'm converting it from XML. Tried your code for the kept data structure but didn't work. Nothing happens.

Ankit Kapoor · Accepted Answer · 2017-11-17 19:45:21Z

0

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.

answered Nov 17, 2017 at 19:45

Ankit Kapoor

1,75412 silver badges19 bronze badges

1 Comment

spaceman Over a year ago

Not that, but thanks for the try. I have updated the question with the json I retrieve so you understand why the [i]['Name']

Aditi Singh · Accepted Answer · 2017-11-19 11:43:38Z

0

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.

answered Nov 19, 2017 at 11:43

Aditi Singh

1172 silver badges8 bronze badges

Collectives™ on Stack Overflow

Display data from array to multiple elements in HTML Angular 4

4 Answers 4

7 Comments

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related