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

What is the solution for halting code execution in a foreach loop with nested callbacks?

Click and release file upload

Encountered an Uncaught ChunkLoadError with Vercel Next.js: Chunk 0 failed to load

JSF with PrimeFaces triggers two Ajax calls when deleting and filtering data

Utilize a randomized dynamic base URL without a set pattern to display a variety of pages

TransitionGroup with CssTransition fails to execute exit transition

The component triggering the redirect prematurely, interrupting the completion of useEffect

Top method for filling an array with strings

Passing parameters in a callback function using $.getJSON in Javascript

Using Cordova plugman to add the initial platform-specific plugin into the project

Executing the beforeRouteLeave navigation guard on a vue component for testing purposes

Dynamic, AJAX-driven content is experiencing a 200 status code

When attempting to add or store data in MongoDB, it triggers a 500 server error

What is the best way to insert a newline in a shell_exec command in PHP

Resetting React state can occur during routing in Ionic applications

I am having trouble with updating an array in React useState. Every time I try to make changes, it keeps reverting back to the initial state. What could

Tips for displaying a combobox popover from @reach/combobox within a MUI dialog element

How can I use `app.js` in Zendesk to connect to an external API using the complete URL

The process of styling with styled components in Mui - a guide to styling

Issue encountered with Ionic and Angular 2: Denied application of style from 'http://localhost:8100/build/main.css' due to unsupported MIME type ('text/html')