how to create complex table from json using angular 6?

Question

I am trying to create table from the given json. here is json Structure. i am using simple html table to make table structure same like mentioned in below snapshot.as data's are dynamic table structure is not displaying proper in my case.

{
"e_id": "1234",
"e_o_name": "Contact_info",
"matching_details": [
    {
        "me_value": "value1",
        "matching_attributes": [
            {
                "me_id": "1234",
                "me_name": "28 sai",
                "me_list": [
                    {
                        "me_type": "Email ID",
                        "me_email_list": [
                            {
                                "me_value": "a@gmail"
                            },
                            {
                                "me_value": "b@gmail"
                            }
                        ],
                        "me_percent": "100"
                    }
                ]
            },
            {
                "me_id": "5678",
                "me_name": "29 meena",
                "me_list": [
                    {
                        "me_type": "Email ID",
                        "me_email_list": [
                            {
                                "me_value": "[email protected]"
                            },
                            {
                                "me_value": ",[email protected]"
                            }
                        ],
                        "me_percent": "100"
                    }
                ]
            }
            
        ]
    },
     {
        "me_value": "value2",
        "matching_attributes": [
            {
                "me_id": "1234",
                "me_name": "rimzim",
                "me_list": [
                    {
                        "me_type": "Email ID",
                        "me_email_list": [
                            {
                                "me_value": "p@gmail"
                            },
                            {
                                "me_value": "q@gmail"
                            }
                        ],
                        "me_percent": "100"
                    }
                ]
            },
            {
                "me_id": "5678",
                "me_name": "ranu",
                "me_list": [
                    {
                        "me_type": "Email ID",
                        "me_email_list": [
                            {
                                "me_value": "[email protected]"
                            },
                            {
                                "me_value": ",[email protected]"
                            }
                        ],
                        "me_percent": "100"
                    }
                ]
            }
            
        ]
    },
    
    
]}

above structure is the actual output.I tried creating the same but for me data's are coming in single row.

enter code here<table>
<tbody>
    <tr>
        <th>contact</th>
        <th>ty</th>
        <th>ed</th>
        <th>mail</th>
        <th>percent</th>
    </tr>
    <tr>
        <td rowspan="4">data.e_o_name</td>
        <td rowspan="2" *ngFor="let match of data.matching_details">{{match.me_value}}</td>
        <td>28 sai</td>
        <th>a@gmail,b@gmail</th>
        <td>100</td>
    </tr>
    
</tbody>

Help for the same is highly appriciated... Thanks in advance

yurzui · Accepted Answer · 2020-08-31 03:37:16Z

1

I would prepare proper table rows structure in order to render this complex table.

component.ts(or service.ts)

rows = [];

generateTable() {
  if (!this.data) {
    return;
  }

  this.rows.push([
    {
      text: this.data.e_o_name,
      rowspan: 0
    }
  ]);
  let maxRowSpan = 0;

  this.data.matching_details.forEach((detail, i) => {
    const elemRowSpan = Math.max(detail.matching_attributes.length, 1);
    maxRowSpan += elemRowSpan;

    if (i > 0) {
      this.rows.push([])
    }
    this.rows[this.rows.length - 1].push({
      text: detail.me_value,
      rowspan: elemRowSpan
    });

    detail.matching_attributes.forEach((attr, j) => {
      if (j > 0) {
        this.rows.push([])
      }

      const mail = attr.me_list[0];
      this.rows[this.rows.length - 1].push(
        {
          text: attr.me_name,
          rowspan: 1
        },
        {
          text: mail.me_email_list.map(({ me_value }) => me_value).join(', '),
          rowspan: 1
        },
        {
          text: mail.me_percent,
          rowspan: 1
        }
      );
    })
  });
  this.rows[0][0].rowspan = maxRowSpan;
}

template.html

<table>
  <tbody>
    <tr>
      <th>contact</th>
      <th>ty</th>
      <th>ed</th>
      <th>mail</th>
      <th>percent</th>
    </tr>
    <tr *ngFor="let row of rows">
      <td *ngFor="let col of row" [attr.rowSpan]="col.rowspan">{{ col.text }}</td>
    </tr>
  </tbody>
</table>

Ng-run Example

answered Aug 31, 2020 at 3:37

yurzui

215k32 gold badges450 silver badges413 bronze badges

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

1 Comment

user3239587 Over a year ago

Hi ...great solution. i need one favor here. if suppose there is no value in ed and mail , i need to remove value. how do i handle the same.

Collectives™ on Stack Overflow

how to create complex table from json using angular 6?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related