Question

我从我的API接收JSON作为响应，我必须将该数据显示到表结构中。

考虑如下JSON：

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

但key1和key2并未修复，每次都会更改，因此我必须将从API接收的内容显示为表格结构。我提到了很多关于动态键的内容。我提到了https://medium.com/codingthesmartway-com-blog/angular-material-part-4-data-table-23874582f23a

但必须显示动态内容。

编辑

我想要以下结构：

key1    key2
value1  value2
value3  value4

Create Table from JSON Data with angularjs and ng-repeat回答SantoshK希望我需要我这么认为，但它为我显示空白表。

Answer 1

您可以尝试这个（仅供参考）：

<!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>

Answer 2

以下是一个解决方案，您应该使用 Object.keys 来获取dynamic的{{1}}个键值

<强>组件：

object

<强> HTML：

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);

}
 }

Here is a working DEMO

Json数组（动态键）+表格式+ angular5

2 个答案: