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
– Sebastien Servouze, Commented May 24, 2018 at 11:25
@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
– Subburaj, Commented May 24, 2018 at 11:36

udayakumar · Accepted Answer · 2018-05-24 11:58:41Z

0

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>

edited May 24, 2018 at 11:58

answered May 24, 2018 at 11:49

udayakumar

6751 gold badge8 silver badges16 bronze badges

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

1 Comment

Subburaj Over a year ago

whether i have to use jquery must here??

Sravan · Accepted Answer · 2018-05-24 12:25:17Z

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, 2018 at 12:25

answered May 24, 2018 at 12:07

Sravan

18.7k3 gold badges33 silver badges54 bronze badges

4 Comments

Subburaj Over a year ago

i found a link stackoverflow.com/questions/43864288/… and its upto what i expected

Sravan Over a year ago

please check my demo, it also creates dynamic keys

Sravan Over a year ago

@Subburaj, is that fine?

Sravan Over a year ago

@Subburaj, I changed my answer to make it in the format you needed. Please check

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related