Richtig JSON Anzeigen in Tabelle Winkel

Ich habe eine API, die mir eine JSON-Array zurück:Richtig JSON Anzeigen in Tabelle Winkel

{"i":11,"j":12,"iterationNumber":9,"results":[12,6,3,10,5,16,8,4,2,1]}

Wie kann ich eine Tabelle in Winkeln machen, so dass die Daten korrekt angezeigt werden? Zur Zeit habe ich dies:

current table

Mein HTML-Code ist:

<table class="table table-striped " ng-show="tableR"> 
     <thead> 
      <tr> 
      <th>i Value</th> 
      <th>j Value</th> 
      <th>iternation Number Value</th> 
      <th>results</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="x in data"> 
      <td>{{x.i}}</td> 
      <td>{{x.j}}</td> 
      <td>{{x.iterationNumber}}</td> 
      <td>{{x.results}}</td> 
      </tr> 
     </tbody> 
     </table>

Können Sie mir helfen, die letzte Spalte zu beheben, so stattdessen alle Werte in einer Zeile der Anzeige, machen sie angezeigt werden es in verschiedene Reihen?

Quelle

2017-02-14 Angel Silva

Ergebnisse ein Array ist, müssen Sie es wiederholen, wie Sie mit den Daten haben –

@AngelSilva Haben Sie kein Glück haben bekommen dies funktioniert? Kann ich anders helfen? –

@TimHarker vielen Dank, es funktionierte einwandfrei –

Ich glaube, das könnte näher an dem sein, was Angel Silva anstrebt.

HTML:

<body ng-controller="MainCtrl"> 
    <table class="table table-striped"> 
     <thead> 
     <tr> 
      <th>i Value</th> 
      <th>j Value</th> 
      <th>iternation Number Value</th> 
      <th>results</th> 
     </tr> 
     </thead> 
     <tbody ng-repeat="x in data"> 
     <tr ng-repeat="r in x.results"> 
      <td>{{x.i}}</td> 
      <td>{{x.j}}</td> 
      <td>{{x.iterationNumber}}</td> 
      <td>{{r}}</td> 
     </tr> 
     </tbody> 
    </table> 
    </body>

JavaScript/AngularJS:

app.controller('MainCtrl', function($scope) { 
    $scope.data = [{"i":11,"j":12,"iterationNumber":9,"results":[12,6,3,10,5,16,8,4,2,1]}]; 
});

Hier ist ein Link zu einem Arbeits Plunker, http://plnkr.co/edit/NrnFI17P932KckzXRcF4?p=preview

Quelle

2017-02-14 23:53:53

vielen Dank –

Keine Sorge. Stört es Sie als "akzeptierte" Antwort? http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work –

Sie könnten ein Array von columns erstellen, das als columns bezeichnet werden könnte. Schleife über Spalten td ‚s Daten mit aktuellen x

Regler

$scope.data = {"i":11,"j":12,"iterationNumber":9,"results":[12,6,3,10,5,16,8,4,2,1]}; 
$scope.columns = Object.key($scope.data)

Markup

<tr ng-repeat="x in data"> 
    <td ng-repeat="column in columns">{{x[column]}}</td> 
</tr>

Quelle

2017-02-14 20:19:23

Verwenden einer zweiten ng-repeat innerhalb einer <ul> (ungeordnete Liste) zu machen:

<table class="table table-striped " ng-show="tableR"> 
    <thead> 
     <tr> 
     <th>i Value</th> 
     <th>j Value</th> 
     <th>iternation Number Value</th> 
     <th>results</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="x in data"> 
     <td>{{x.i}}</td> 
     <td>{{x.j}}</td> 
     <td>{{x.iterationNumber}}</td> 
     <td> 
      <ul> 
       <li ng-repeat="r in x.results"> 
        {{ r }} 
       </li> 
      </ul> 
     </td> 
     </tr> 
    </tbody> 
    </table>

Quelle

2017-02-14 20:28:33

können Sie versuchen, array.join() Methode alle beitreten die Elemente eines ar Strahl in eine Schnur.

DEMO

var myApp = angular.module('myApp',[]); 
 

 
myApp.controller('MyCtrl',function($scope) { 
 
    $scope.tableR = true; 
 
    $scope.data = [{ 
 
    "i":11, 
 
    "j":12, 
 
    "iterationNumber":9, 
 
    "results":[12,6,3,10,5,16,8,4,2,1] 
 
    }]; 
 
});

tr,th,td { 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
    <table class="table table-striped " ng-show="tableR"> 
 
     <thead> 
 
      <tr> 
 
      <th>i Value</th> 
 
      <th>j Value</th> 
 
      <th>iternation Number Value</th> 
 
      <th>results</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr ng-repeat="x in data"> 
 
      <td>{{x.i}}</td> 
 
      <td>{{x.j}}</td> 
 
      <td>{{x.iterationNumber}}</td> 
 
      <td>{{x.results.join()}}</td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
</div>

Quelle

2017-02-15 18:25:28

Richtig JSON Anzeigen in Tabelle Winkel

Antwort

Verwandte Themen