Я пытался выяснить, есть ли способ получить результат API (JSON) в HTML-таблицу.Способ, которым я пытался, не удался.Я пытаюсь получить JSON из API TFL.
Вот фрагмент кода, над которым я сейчас работаю:
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <table class="table table-border table-stiped" id="test_table" <body> <table> <script> $(document).ready(function(){ $.getJSON("https://api.tfl.gov.uk/Journey/JourneyResults/1000012/to/1000172",function(data){ var test_data = ''; $.each(data, function(key, value){ test_data += '<tr>'; test_data += '<td>'+value.duration+'</td>'; test_data += '<td>'+value.arrivalDateTime+'</td>'; test_data += '<td>'+value.departureTime+'</td>'; test_data += '</tr>'; }); $('#test_table').append(test_data); }); }); </script> </table> </body>
Прежде чем использовать JSON, попытайтесь понять структуру JSON (ответ ajax).Я сделал некоторые изменения во фрагменте для справки (Рабочая)
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <table class="table table-border table-stiped" id="test_table" <body> <table> <script> $(document).ready(function(){ $.getJSON("https://api.tfl.gov.uk/Journey/JourneyResults/1000012/to/1000172",function(data){ var test_data = ''; $.each(data.journeys, function(key, value){ test_data += '<tr>'; test_data += '<td>'+value.duration+'</td>'; test_data += '<td>'+value.arrivalDateTime+'</td>'; test_data += '<td>'+value.startDateTime+'</td>'; test_data += '</tr>'; }); $('#test_table').append(test_data); }); }); </script> </table>