Warum Daten nicht in der Frontend-Tabellenstruktur angezeigt werden?

Question

Im Folgenden finden Sie eine Beispiel-JSON-Daten, die von einer Dienstanforderung abgerufen werden.

{ 
    "sunday": [ 
    { 
     "endTime": "08:50 AM", 
     "startTime": "08:00 AM", 
     "duration": "50", 
     "period": "A" 
    }, 
    { 
     "endTime": "08:50 AM", 
     "startTime": "08:00 AM", 
     "duration": "50", 
     "period": "A" 
    } 
    ] 
} 

Dies ist mein HTML-Code für die Startzeit (natürlich gibt es auch andere Werte)

<td ng-repeat="d in data.sunday.startTime track by $index">{{ d }}</td> 

-Controller-Code

 $http.get('https://url') 
     .success(function(response){ 
      $scope.data = response; 
      console.log($scope.data); 
     }); 

Ich versuche, die Daten in ein zur Anzeige Tabellenformat, aber ich bin nicht in der Lage, es zu tun. Wenn ich truste, konnte ich den Wert sehen, aber nicht in der Frontend-Tabellenstruktur. Hat es etwas mit JSON-Struktur oder mit meinem HTML zu tun?

Hier ist die .

Answer 1

ändern diese:

<td ng-repeat="d in data.sunday.startTime track by $index">{{ d }}</td> 

zu

<td ng-repeat="d in data.sunday track by $index">{{ d.startTime }}</td> 

arbeiten.

Answer 2

data.sunday.startTime ist eine Zeichenfolge, und Sie versuchen, mit ngRepeat darüber zu iterieren. data.sunday ist ein Array, über das Sie iterieren und dessen Inhalt anzeigen können.

Beispiele:

<tr ng-repeat="s in data.sunday track by $index"> 
    <td ng-repeat="(key,value) in d">{{value}}</td> 
</tr> 

<tr ng-repeat="s in data.sunday track by $index"> 
    <td>{{s.endTime}}</td> 
    <td>{{s.startTime}}</td> 
    <td>{{s.duration}}</td> 
    <td>{{s.period}}</td> 
</tr> 

Answer 3

Sie zu tun haben:

<td ng-repeat="d in data.sunday track by $index">{{ d.startTime }}</td> 

Answer 4

try this:

<td ng-repeat="d in data.sunday track by $index">{{ d.startTime }}</td> 

Answer 5

Sie sollten die Attribute data.sunday im hinübergehen ng-repeat

<td ng-repeat="d in data.sunday track by $index"> 
    Start time: {{ d.startTme }} 
    End time: {{ d.endTime }} 
    Period: {{ d.period }} 
    Duration: {{ d.duration }} 
</td> 

Hier ist eine funktionierende Version von Ihr Planker: https://embed.plnkr.co/A4kOM7I0gJVOEoq6zgXT/

Answer 6

Dies wird für Sie arbeiten.

<tr ng-repeat="d in data.sunday track by $index"> 

      <td>{{d.startTime}}</td> 
      <td>{{d.endTime}}</td> 
      <td>{{d.period}}</td> 
      <td>{{d.duration}}</td> 
    </tr> 

Kasse Meine Plunker für Ihre Referenz

https://plnkr.co/edit/Mv4HLF1JyCHK10vIk4q4?p=preview