Array of Json(dynamic keys) + table format +angular5

Question

I am receiving a JSON as response from my API, i have to display that data into table structure.

Consider JSON as follows:

[
{
"key1":"value1",
"key2" :"value2"
},
{
"key1":"value3",
"key2" :"value4"
}
]

But key1 and key2 is not fixed, it will change each time, so i have to display the content received from API as Table structure. I referred a lot nothing is regarding dynamic keys. I referred this https://medium.com/codingthesmartway-com-blog/angular-material-part-4-data-table-23874582f23a

But have to display dynamic content.

EDIT

I want the below structure:

key1    key2
value1  value2
value3  value4

Create Table from JSON Data with angularjs and ng-repeat answerBy SantoshK is want i need i think so but its showing blank table for me.

So you would like to iterate through your json key/value with index is that right ? Like `json[0].key = "key1"` and `json[0].value = "value1"` — Sebastien Servouze, May 24 '18 at 11:25
https://stackblitz.com/edit/material2-beta11-vmwjpe?file=app%2Fapp.component.html — Sravan, May 24 '18 at 11:27
@Sravan In your code suppose `name: string; position: number; weight: number; symbol: string;` is not fixed means if you dont know the keys , is my case — Subburaj, May 24 '18 at 11:36
@Sravan if keys are dynamic how can we create an interface?? — Subburaj, May 24 '18 at 11:42

udayakumar · Answer 1 · 2018-05-24T11:58:41.533

You can try this (It is just reference only):

<!DOCTYPE html>
<html>
   <title>Web Page Design</title>
   <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>    
   </head>
   <table>
      <thead>
         <tr>
            <th>Value</th>
         </tr>
      </thead>
      <tbody id="tableId">

      </tbody>
   </table>
   <script>
      function sayHello() {
         var sample = [{"key1":"value1","key2" :"value2"},{"key1":"value1","key2":"value2"}]


         for (key in sample){
             for (currVal in sample[key]){
                $('#tableId').append('<tr><td>'+sample[key][currVal]+'</td></tr>')
             }
         }

      }
      sayHello();
   </script>
   <body></body>
</html>

whether i have to use jquery must here?? – Subburaj May 24 '18 at 11:52 — Subburaj, May 24 '18 at 11:52

Sravan · Answer 2 · 2018-05-24T12:25:17.337

0

Here is a solution, you should take Object.keys to get the dynamic key values of object

Component:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  candidature = "test";
  data =[
{
"key1":"value1",
"key2" :"value2"
},
{
"key1":"value3",
"key2" :"value4"
}
]

getKeys(schedule_data){
  return Object.keys(schedule_data);

}
 }

HTML:

<table>  
<th *ngFor="let sch of getKeys(data[0])">
  {{sch}}
      <div *ngFor="let schedule_data of data">
        {{schedule_data[sch]}}
    </div>
</th>
</table>

Here is a working DEMO

edited May 24 '18 at 12:25

answered May 24 '18 at 12:07

Sravan

18,467
3
30
54

i found a link https://stackoverflow.com/questions/43864288/how-to-set-table-heading-dynamically-in-angular-2 and its upto what i expected – Subburaj May 24 '18 at 12:10
please check my demo, it also creates dynamic keys – Sravan May 24 '18 at 12:11
@Subburaj, is that fine? – Sravan May 24 '18 at 12:20
@Subburaj, I changed my answer to make it in the format you needed. Please check – Sravan May 24 '18 at 12:25

Array of Json(dynamic keys) + table format +angular5

2 Answers2