Akmal_API_Sample

by Hifni Nazeer

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>

<h1>
  Uber Trip Service
</h1>

<h3>
  Your Trips
</h3>

<button id='btnGetTrip'>
  Get My Trips
</button>

<div id='divInfoSpace'>

</div>

JavaScript

$(document).ready(function() {
//mock API
  var url = "https://run.mocky.io/v3/26f59d5b-7fc8-4e5f-971d-90a8bd7ae0ac";

  //Call the API
  $("#btnGetTrip").on("click", function() {
    $.get(url, function(data) {
      //alert("Data Loaded: " + data);
      var html = "";
      var row = "";

      data.trips.forEach(function(currentValue) {
        //console.log(currentValue);
        //console.log(currentValue.client_fare);
				
				row += "<tr><td>Currency</td><td>" + currentValue.currency_code + "</td></tr>";
        row += "<tr><td>Amount</td><td>" + currentValue.client_fare + "</td></tr>";
				row += "<tr><td>Amount without Tip</td><td>" + currentValue.client_fare_without_tip + "</td></tr>";
				row += "<tr><td>Note for Driver</td><td>" + currentValue.note_for_driver + "</td></tr>";
				row += "<tr><td>Pick Up from</td><td>"+currentValue.pickup.address+"</td></tr>";
				row += "<tr><td>Drop off to</td><td>"+currentValue.destination.address+"</td></tr>";
				row += "<tr><td>Driver</td><td>"+currentValue.driver.name+"</td></tr>";
				row += "<tr><td>Driver Rating</td><td>"+currentValue.driver.rating+"</td></tr>";
				
      });

      html = "<table><thead><th>Trip Details</th></thead><tbody>" + row + "</tbody></table>";

      $('#divInfoSpace').html(html);
    });
  });

});