Question

想要调用表中md中的所有数据我尝试了所有可能的值，但没有工作，所以指导我如何使用md值显示在表

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  $.get("https://cricapi.com/api/matches?apikey==apikey", function(matchdata) {
    console.log(matchdata.matches);
    matchdata.matches.forEach(function(md) {
      console.log(md.description + " - to grab more details, simply use the unique_id " + md.unique_id + " with the cricketScore api!");

      return true;

    });
  });
</script>

Answer 1

var $tableBody = $('#tableBody');

function createRow(dm) {
  var team_1 = dm['team-1'],
    team_2 = dm['team-2'],
    winner = (
      dm['toss_winner_team'] ?
      dm['toss_winner_team'] :
      'N/A'
    )
  return (
    '<tr>' +
    '<td>' + team_1 + '</td>' +
    '<td>' + team_2 + '</td>' +
    '<td>' + winner + '</td>' +
    '</tr>'
  )
}
$.get("https://cricapi.com/api/matches?apikey=your key", function(matchdata) {
  console.log(matchdata.matches);
  var rows = matchdata.matches.map(createRow).join('');

  $tableBody.html(rows);
});

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
  <table>
    <thead>
      <tr>
        <td>Team A</td>
        <td>Team B</td>
        <td>Winner</td>
      </tr>
    </thead>
    <tbody id="tableBody">
      <tbody>
  </table>
</body>

</html>

DEMO

Answer 2

=参数中的额外apikey。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  $.get("https://cricapi.com/api/matches?apikey=DSyFXyxkkyMk1t1L0FNiInn3Pu92", function(matchdata) {
    console.log(matchdata.matches);
    matchdata.matches.forEach(function(md) {
      console.log(md.description + " - to grab more details, simply use the unique_id " + md.unique_id + " with the cricketScore api!");

      return true;
    });
  });
</script>

Raw Output

Answer 3

html table

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css" >


    </style>
</head>
<body>
    <table id="mytable">

    </table>
</body>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<!-- <script type="text/javascript" src="js/slick.min.js"></script> -->

<script type="text/javascript" src="js/custom.js"></script>

</html>

JS（AJAX）

$(document).ready(function () {
    $.ajax({ 
        type: 'GET', 
        url: 'https://cricapi.com/api/matches?apikey="api key"',
        dataType: 'json',
        success: function (data) { 
            $.each(data, function(index, element) {
                $.each(element, function(index1, e1) {
                        $('#mytable').append('<tr><td>'+e1.date+'</td> <td>'+e1.type+'</td></tr>');
                });
            });
        }
    });
});

结果

通过rest api调用数据不知道如何调用表中的数据

3 个答案: