Wie bekomme ich meine JSON-Daten auf der Seite angezeigt?

Ich verwende eine API, um eine Tabelle aller Daten zu erstellen. Die JSON-URL ist verbunden (was ich mit einem 200 Status verifiziert habe). Was mache ich falsch? Am wichtigsten ist, wenn es einen anderen Weg gibt, um das zu erreichen, was ich versuche, bin ich offen.Wie bekomme ich meine JSON-Daten auf der Seite angezeigt?

(function() { 
 
    var app = angular.module("RacingApp", []); 
 
    app.controller("DriversCtrl", function($scope, $http) { 
 
     $http.get("http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK").then(function(response) { 
 
      $scope.driver = response.MRData.StandingsTable.StandingsLists[0].DriverStandings; 
 
     }); 
 
    }); 
 
})();

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
 
    <title>F1 Racing API</title> 
 
    <!-- Bootstrap --> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    <link rel="stylesheet" href="assets/css/main.css"> 
 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
 
    <!--[if lt IE 9]> 
 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> 
 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
 
    <![endif]--> 
 
</head> 
 

 
<body ng-app="RacingApp"> 
 
    <div class="container" ng-controller="DriversCtrl"> 
 
     <div class="row"> 
 
      <div class="col-md-8 col-md-offset-2"> 
 
       <table class="table table-striped table-bordered table-compressed"> 
 
        <thead id="table-header"> 
 
         <tr> 
 
          <th colspan="5"> 
 
           <div class="text-left col-md-6">Drivers Championship Standings</div> 
 
           <div class="text-right col-md-6"> 
 
           
 
           </div> 
 
          </th> 
 
         </tr> 
 
        </thead> 
 
        <thead> 
 
         <tr> 
 
          <th>Place</th> 
 
          <th>Nationality</th> 
 
          <th>Name</th> 
 
          <th>Sponsor</th> 
 
          <th>Points</th> 
 
         </tr> 
 
        </thead> 
 
        <tbody> 
 
         <tr ng-repeat="info in information"> 
 
          <th scope="row">{{$index + 1}}</th> 
 
          <td>{{info.Driver.nationality}}</td> 
 
          <td><a href="Driver's Wikipedia Page">{{info.Driver.givenName}} &amp; {{info.Driver.familyName}}</a></td> 
 
          <td><a href="Sponsor's Wikipedia Page">{{info.Constructors[0].name}}</a></td> 
 
          <td>{{info.points}}</td> 
 
         </tr> 
 
        </tbody> 
 
       </table> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
    <script src="https://code.angularjs.org/1.5.7/angular.min.js"></script> 
 
    <script src="js/app.js" type="text/javascript"></script> 
 
</body> 
 

 
</html>

Quelle

2017-04-17 D. Hawkins

Wie viele Fragen haben Sie für den gleichen Zweck hinzugefügt? – Sajeetharan

Keine. Die Frage, die ich stelle, ist rein situativ. Eine Sache funktioniert möglicherweise nicht für die andere. –

fand ich eine Auflösung. Aus welchem Grund auch immer, das Paket, das ich vom Server zurückerhalten habe, war MRData.data, das in den eigentlichen JSON-Daten nicht angezeigt wurde. Es funktioniert jetzt!!

Quelle

2017-04-17 17:24:01

Wie bekomme ich meine JSON-Daten auf der Seite angezeigt?

Antwort

Verwandte Themen