Массив Json (динамические клавиши) + формат таблицы + angular5 - PullRequest
Новая
       0

Массив Json (динамические клавиши) + формат таблицы + angular5

0 голосов
/ 24 мая 2018

Я получаю JSON в качестве ответа от моего API, мне нужно отобразить эти данные в структуре таблицы.

Рассмотрим 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

Создать таблицу из данных JSON с помощью angularjs и ng-repeat answerBy SantoshK это то, что мне нужно, я так думаю, но для меня отображается пустая таблица.

Ответы [ 2 ]

0 голосов
/ 24 мая 2018

Вот решение, вы должны взять Object.keys, чтобы получить dynamic значения ключа object

Компонент: 

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>

Вот рабочий ДЕМО

0 голосов
/ 24 мая 2018

Вы можете попробовать это (это только для справки): 

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...