Create dynamic table based on JSON in angular 5

Question

Is it possible to create a dynamic Table(dynamic Columns) based on a JSON object with Angular 5? If so how?

I get the following json as response of API:

{
    "ResponseStatus": true,
    "ResponseData": [
        {
            "Parent": "Company 1",
            "Data": [
                {
                    "Field1": "Membership 1",
                    "Field2": "153.00"
                },
                {
                    "Field1": "Membership 2",
                    "Field2": "130.00"
                },
                {
                    "Field1": "Membership 3",
                    "Field2": "1850.00"
                }
            ]
        },
        {
            "Parent": "Company 2",
            "Data": [
                {
                    "Field1": "Membership 1",
                    "Field2": "148.00"
                },
                {
                    "Field1": "Membership 2",
                    "Field2": "100.00"
                },
                {
                    "Field1": "Membership 4",
                    "Field2": "1800.00"
                }
            ]
        }
    ]
}

Now I want to create table based on this data that should be:

+------------------+------------------+------------------+
| Membership Type  |    Company 1     |    Company 2     |
+------------------+------------------+------------------+
|  Membership 1    |      153.00      |      148.00      |
+------------------+------------------+------------------+
|  Membership 2    |      130.00      |      100.00      |
+------------------+------------------+------------------+
|  Membership 3    |      1850.00     |                  |
+------------------+------------------+------------------+
|  Membership 4    |                  |     1800.00      |
+------------------+------------------+------------------+

NOTE: Number of company could be different.

What would the best approach be to solve this? I just cant figure it out how to solve this problem? Any help is really appreciated.

Here I play with some code as:

 ngOnInit() {

        this.headers = this.Testdata.map(t => t.Parent);
        this.Testdata.forEach(x => {
          x.Data.forEach(y => y['Parent'] = x.Parent)
        })

        var data = this.Testdata.map(t => t.Data);

       var temp = [];

       data.forEach(function(a) {
          temp.push(a.map(function (t) {
            let c = {};
            c['Field1'] = t.Field1;
            c[t['Parent']] = t.Field2;
            return c;
          }));
        });

        var rowList = temp.flat();
    }




    <table>
          <thead>
            <tr>
              <td *ngFor="let col of headers">{{col}}</td>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let row of rowData">
              <td>{{row.Field1}}</td>
              <td *ngFor="let col of headers">
                {{row[col]}}
              </td>
            </tr>
          </tbody>
        </table>

Marking it as too broad. Iterating over that JSON to generate a table doesn't seem that complicated. Try something, if it doesn't work, then post it. We typically don't write code from scratch in an answer. We help you understand where you have may have made a mistake. See stackoverflow.com/help/how-to-ask — Ruan Mendes
– Ruan Mendes, Commented Sep 23, 2019 at 11:29
You still need to explain where the problem is, error messages? What's the unexpected behavior. The easier you make it for others, the more likely you are to get an answer — Ruan Mendes
– Ruan Mendes, Commented Sep 23, 2019 at 11:59

maryrio7 · Accepted Answer · 2019-09-23 11:24:54Z

1

Maybe before insert anything in the table, transform the json into an array of a custom object that you can declare in the same .ts file:

export class CustomObject {
  id :string;
  company1 :string;
  company2 :string;
}

list :CustomObject[] = [];

Then inside the main class declare a list and iterate over your json, comparing the value of id(MembershipType). If the new membershipType matches another one that already is in the array, then add the value of company1 or company2, Else "push element as CustomObject". I hope you can write this code is just two nested For while reading the json :)

answered Sep 23, 2019 at 11:24

maryrio7

3324 silver badges19 bronze badges

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

1 Comment

Saurabh Gadani Over a year ago

Thanks for answer :) But number of company may different how can I create class with fixed properties? It need some dynamic way.

Collectives™ on Stack Overflow

Create dynamic table based on JSON in angular 5

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