Создать таблицу из данных JSON с угловыми и ng-повторами

У меня есть следующие данные как JSON:

{
  "Workout1": {
    "Name": "First",
    "Rounds": [
      {
        "Exercises": [
          {
            "Name": "Exercise1",
            "Repeat": 10
          },
          {
            "Name": "Exercise2",
            "Repeat": 10
          },
          {
            "Name": "Exercise3",
            "Repeat": 10
          }
        ]
      },
      {
        "Exercises": [
          {
            "Name": "Exercise1",
            "Repeat": 20
          },
          {
            "Name": "Exercise2",
            "Repeat": 20
          },
          {
            "Name": "Exercise3",
            "Repeat": 20
          }
        ]
      },
      {
        "Exercises": [
          {
            "Name": "Exercise1",
            "Repeat": 30
          },
          {
            "Name": "Exercise2",
            "Repeat": 30
          },
          {
            "Name": "Exercise3",
            "Repeat": 30
          }
        ]
      }
    ]
  }
}

и я хочу отобразить его как таблицу html с angularjs и ng-repeat. так что я получаю следующую таблицу:

<table class="table">
    <tr>
        <th>Round1</th>
        <th>Round2</th>
        <th>Round3</th>
    </tr>
    <tr>
        <td>10 Exercise1</td>
        <td>20 Exercise1</td>
        <td>30 Exercise1</td>
    </tr>
    <tr>
        <td>10 Exercise2</td>
        <td>20 Exercise2</td>
        <td>30 Exercise2</td>
    </tr>
    <tr>
        <td>10 Exercise3</td>
        <td>20 Exercise3</td>
        <td>30 Exercise3</td>
    </tr>
</table>

для предварительного просмотра таблицы: http://jsfiddle.net/54pD8/

моя проблема в том, что таблица html работает на основе строк. Я могу повторять ng-repeat через мои раунды, а затем через мои упражнения но для создания таблицы мне нужно всегда первое из каждого упражнения, а затем второе из каждого упражнения и т.д.

Может кто-нибудь помочь мне с этой проблемой?

пс. если у вас есть идея улучшить макет для этих данных в json, ваши предложения приветствуются, я новичок в json (и angularjs).

Ответы

Ответ 1

Решение, которое вы ищете, находится в официальном учебнике Angular. В этом учебнике телефоны загружаются из файла JSON с помощью сервиса Angulars $http. В приведенном ниже коде мы используем $http.get для загрузки файла phone.json, сохраненного в каталоге телефонов:

var phonecatApp = angular.module('phonecatApp', []);   
phonecatApp.controller('PhoneListCtrl', function ($scope, $http) {
 $http.get('phones/phones.json').success(function(data) {
$scope.phones = data;
}); 
$scope.orderProp = 'age';
});

Затем мы перебираем телефоны:

<table>
  <tbody ng-repeat="i in phones">
    <tr><td>{{i.name}}</td><td>{{$index}}</td></tr>
    <tr ng-repeat="e in i.details">
       <td>{{$index}}</td>
       <td>{{e.foo}}</td>
       <td>{{e.bar}}</td></tr>
  </tbody>
</table>

Ответ 2

Простой способ использования для создания динамического заголовка и ячейки в обычной таблице:

<table width="100%" class="table">
 <thead>
  <tr>
   <th ng-repeat="(header, value) in MyRecCollection[0]">{{header}}</th>
  </tr>
 </thead>
 <tbody>
  <tr ng-repeat="row in MyRecCollection | filter:searchText">
   <td ng-repeat="cell in row">{{cell}}</td>
  </tr>
 </tbody>
</table>

MyApp.controller('dataShow', function ($scope, $http) {
    //$scope.gridheader = ['Name','City','Country']
        $http.get('http://www.w3schools.com/website/Customers_MYSQL.php').success(function (data) {

                $scope.MyRecCollection = data;
        })

        });

Данные JSON:

[{
    "Name": "Alfreds Futterkiste",
    "City": "Berlin",
    "Country": "Germany"
}, {
    "Name": "Berglunds snabbköp",
    "City": "Luleå",
    "Country": "Sweden"
}, {
    "Name": "Centro comercial Moctezuma",
    "City": "México D.F.",
    "Country": "Mexico"
}, {
    "Name": "Ernst Handel",
    "City": "Graz",
    "Country": "Austria"
}, {
    "Name": "FISSA Fabrica Inter. Salchichas S.A.",
    "City": "Madrid",
    "Country": "Spain"
}, {
    "Name": "Galería del gastrónomo",
    "City": "Barcelona",
    "Country": "Spain"
}, {
    "Name": "Island Trading",
    "City": "Cowes",
    "Country": "UK"
}, {
    "Name": "Königlich Essen",
    "City": "Brandenburg",
    "Country": "Germany"
}, {
    "Name": "Laughing Bacchus Wine Cellars",
    "City": "Vancouver",
    "Country": "Canada"
}, {
    "Name": "Magazzini Alimentari Riuniti",
    "City": "Bergamo",
    "Country": "Italy"
}, {
    "Name": "North/South",
    "City": "London",
    "Country": "UK"
}, {
    "Name": "Paris spécialités",
    "City": "Paris",
    "Country": "France"
}, {
    "Name": "Rattlesnake Canyon Grocery",
    "City": "Albuquerque",
    "Country": "USA"
}, {
    "Name": "Simons bistro",
    "City": "København",
    "Country": "Denmark"
}, {
    "Name": "The Big Cheese",
    "City": "Portland",
    "Country": "USA"
}, {
    "Name": "Vaffeljernet",
    "City": "Århus",
    "Country": "Denmark"
}, {
    "Name": "Wolski Zajazd",
    "City": "Warszawa",
    "Country": "Poland"
}]

Ответ 3

Чтобы создать таблицу HTML с помощью JSON, мы будем использовать директиву ngRepeat для AngularJS.

Пример

HTML

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<table border="1">
<tr ng-repeat="x in names">
<td>{{x.Name}}</td>
<td>{{x.City}}</td>
<td>{{x.Country}}</td></tr>
</table>
</div>
</body>
</html>

JavaScript

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope) {
    $scope.names = [
      { "Name" : "Max Joe", "City" : "Lulea", "Country" : "Sweden" },
      { "Name" : "Manish", "City" : "Delhi", "Country" : "India" },
      { "Name" : "Koniglich", "City" : "Barcelona", "Country" : "Spain" },
      { "Name" : "Wolski", "City" : "Arhus", "Country" : "Denmark" }
    ];
});

В приведенном выше примере я создал таблицу из json. Я получил от http://www.tutsway.com/create-html-table-using-json-in-angular-js.php

Ответ 4

Angular 2 или 4:

Нет больше ng-repeat, it * ngВ настоящее время в последних версиях Angular!

<table style="padding: 20px; width: 60%;">
    <tr>
      <th  align="left">id</th>
      <th  align="left">status</th>
      <th  align="left">name</th>
    </tr>
    <tr *ngFor="let item of myJSONArray">
      <td>{{item.id}}</td>
      <td>{{item.status}}</td>
      <td>{{item.name}}</td>
    </tr>
</table>

Использовал этот простой JSON:

[{"id":1,"status":"active","name":"A"},
{"id":2,"status":"live","name":"B"},
{"id":3,"status":"active","name":"C"},
{"id":6,"status":"deleted","name":"D"},
{"id":4,"status":"live","name":"E"},
{"id":5,"status":"active","name":"F"}]

Ответ 5

Вы можете использовать метод $http.get() для извлечения вашего файла JSON. Затем присвойте данные ответа объекту $scope. В HTML для создания таблицы используйте ng-repeat для объекта $scope. ng-repeat будет зацикливать строки внутри этого цикла, вы можете динамически связывать данные с столбцами.

Я проверил ваш код, и вы создали статическую таблицу

<table>
<tr>
<th>Name</th>
<th>Relationship</th>
</tr>
<tr ng-repeat="indivisual in members">
<td>{{ indivisual.Name }}</td>
<td>{{ indivisual.Relation }}</td>
</tr>
</table>

так лучше, что вы можете перейти к моему коду, чтобы создать динамическую таблицу, поскольку данные будут столбцами, а строка будет увеличиваться или уменьшаться.

Ответ 7

Я пытаюсь загрузить данные JSON в угловом коде, используя следующий код, но я получаю ошибку

================================================== ================================== $ http ({method: 'GET', url: ' http://re-pos.in/partnerportal/web-service.php?action=getpartnerdata&partnerkey=WNBOSV '}). then (функция success (response) {alert (' Success '); $ scope.myWelcome22 = response.data;}, function error (response) {alert ('Error');});