I need help accessing data from a REST API and displaying it in a table

Question

I need help accessing data from a REST API and displaying it in a table

How can I call all the data in "md" and display it in a table? I've tried multiple values but none seem to work. Can someone guide me on how to use the "md" value to display in a table?

<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>

javascript ajax

Answer 1

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>

Click here for a live DEMO

Answer 2

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>

Click here for a live DEMO

Answer 3

Answer №2

There is a small mistake with an additional = in the apikey parameter.

<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 + " - for more details, use the unique_id " + md.unique_id + " with the cricketScore api!");

      return true;
    });
  });
</script>

View Raw Output Here

Answer 4

There is a small mistake with an additional = in the apikey parameter.

<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 + " - for more details, use the unique_id " + md.unique_id + " with the cricketScore api!");

      return true;
    });
  });
</script>

View Raw Output Here

Answer 5

Answer №3

Creating an 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>

Implementing JavaScript (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>');
                });
            });
        }
    });
});

View the Result

https://i.stack.imgur.com/yyXgg.png

Answer 6

Creating an 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>

Implementing JavaScript (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>');
                });
            });
        }
    });
});

View the Result

https://i.stack.imgur.com/yyXgg.png

I need help accessing data from a REST API and displaying it in a table

Answer №1

Answer №2

Answer №3

Similar questions

How the React Component Class Executes OnChange Event in a Closure

The Vue warning states that the property "$store" was attempted to be accessed during rendering, but it is not defined on the current instance

Sending data from JavaScript to Jade templatesIs this alright?

Expanding a JavaScript list using HTML inputs

Adjusting the timing of a scheduled meeting

Press a button to activate a function on a dynamically created table using Ajax

Maximizing Efficiency: Utilizing a Single jQuery Function to Retrieve Specific Values

Exploring the realms of Django Administrator with external JavaScript integration

Using Vue3 to set attributes on web components

Generate the URL based on the JSON feed

The absence of the iframe in ie8 is causing problems that cannot be fixed with relative positioning

Next.js triggers the onClick event before routing to the href link

Using es6 map to deconstruct an array inside an object and returning it

Unable to showcase array JSON values on HTML using ng-model

Substitute the functions within a Node.js module with simulated functions

Completely different method for transmitting an array to NodeJS through AJAX

Steps for incorporating code to calculate the total price and append it to the orderMessage

AngularJS - Introducing blurred delay

Tips for submitting multiple radio button values in a tabular format

Images Are Failing to Load on the Webpage