How to auto-detect headers of json for a table in Angular4?

Question

first of all sorry for my bad english. I'm creating a component named "table" on my application. This component receives a JSON delievered by Laravel Backend. I'm trying to make a dinamic component for all jsons that it can receive. I mean, this component will be able to draw a table with the fields that the json contains. I want that if i receive a json that have "name, age, adress", or "name, country, state", the table shows it exactly.

Is there any already existing component that provides me this? Because all components that i found the columns must be configured previously.

Thanks!

Chris Farmer · Accepted Answer · 2017-10-17 18:43:31Z

2

You could definitely create a simple component to do this. Here's a plunk that shows one way you could get started.

https://plnkr.co/edit/jZKJl9yDnXCvGCnxqlHM

The component is my-table and you pass in your array of objects. This particular implementation expects each element of the array to have the same keys.

@Component({
  selector: 'my-table',
  template: `
    <table>
      <tr>
        <th *ngFor="let header of headers">
          {{ header }}
        </th>
      </tr>
      <tr *ngFor="let row of data">
        <td *ngFor="let cell of objectKeys(row)">
          {{ row[cell] }}
        </td>
      </tr>
    </table>
  `,
})
export class MyTableComponent implements OnInit {

  @Input() data: any[];
  headers: any;
  private objectKeys: any;

  constructor() {
    this.objectKeys = Object.keys;
  }

  ngOnInit() {
    this.headers = Object.keys(this.data[0]);
  }
}

And you'd set up the data:

this.mydata = [
  { one: "hello", two: "world", three: "foo", four: 1 },
  { one: "xxx", two: "aaa", three: "foo", four: 1 },
  { one: "yyy", two: "bbb", three: "foo", four: 1 }  
]

And use the component like so:

<my-table [data]="mydata"></my-table>

answered Oct 17, 2017 at 18:43

Chris Farmer

25.5k37 gold badges125 silver badges170 bronze badges

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

1 Comment

Juan Accinelli Over a year ago

Perfect! This helped me out. Im now trying to make a pipe for filter all columns.. do you have some idea?

Jeff Woodard · Accepted Answer · 2017-10-17 19:25:54Z

1

See AngularJS dynamic table with unknown number of columns.

Also, pure code-writing requests are off-topic on Stack Overflow -- we expect questions here to relate to specific programming problems -- but we will happily help you write it yourself! Tell us what you've tried, and where you are stuck. This will also help us answer your question better.

answered Oct 17, 2017 at 19:25

Jeff Woodard

6478 silver badges15 bronze badges

2 Comments

Chris Farmer Over a year ago

His question was about Angular 4, which is not all that relevant to AngularJS. But I do agree with your "also..." paragraph.

Jeff Woodard Over a year ago

Yea, i was kind of just going off of a quick google search for something similar without much to go on from the question. Glad you were able to provide a concrete example.

Martin Adámek · Accepted Answer · 2017-10-17 18:23:15Z

0

You can use Object.keys(row) to get array of keys of that row. I guess you have JSON with array of rows, right? In that case, you can simply do this on the first row and then build the table dynamically.

const data = [
    { field1: 'value 1', field2: 123, field3: 'adsaosd' },
    { field1: 'value 2', field2: 123, field3: 'adsaosd' },
    { field1: 'value 3', field2: 123, field3: 'adsaosd' },
    { field1: 'value 4', field2: 123, field3: 'adsaosd' },
]

const keys = Object.keys(data[0]); // TODO check whether there is at least one row

answered Oct 17, 2017 at 18:23

Martin Adámek

18.6k5 gold badges52 silver badges75 bronze badges

Collectives™ on Stack Overflow

How to auto-detect headers of json for a table in Angular4?

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related