Get JSON data using AJAX & Javascript in Flight Status Table

HTML Code (index.html)
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Flight Status</title>
  <!-- using google font -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,500" rel="stylesheet">
  <!-- using font awesome 5 -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ"
    crossorigin="anonymous">
  <!-- importing reset and main css -->
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/main.css">
</head>

<body>
  <div class="container">
    <h2>Departures
      <i class="fas fa-plane-departure"></i>
    </h2>
    <div class="flightStatus">
      <table>
        <thead>
          <tr>
            <th>Time</th>
            <th>Destination</th>
            <th>Gate</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>01:40</td>
            <td>London</td>
            <td>A2</td>
            <td class="status">Boarding</td>
          </tr>
          <tr>
            <td>01:45</td>
            <td>Moscow</td>
            <td>C4</td>
            <td class="status">Boarding</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <!-- importing main js -->
  <script src="js/main.js"></script>
</body>

</html>

CSS File (reset.css)
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
html {
 box-sizing: border-box;
}

*, *:before, *:after {
 box-sizing: inherit;
}

* {
  max-height: 1000000px;
  margin: 0;
  padding: 0;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}

CSS File (main.css)
/* general */

body {
font: 300 20px/1.6 'Roboto', sans-serif;
}

.container {
max-width: 640px;
padding: 0 15px;
margin: 0 auto;
}

h2 {
font-size: 28px;
font-weight: 500;
padding: 40px 0 20px;
text-transform: uppercase;
}

/* flight status */
.flightStatus {
text-align: center;
width: 100%;
background: #f9f9f9;
}

table {
display: table;
width: 100%;
}

th {
text-transform: uppercase;
background: #e4e4e4;
font-weight: 500;
}

th,
td {
padding: 15px;
text-align: left;
vertical-align: middle;
}

td {
border-bottom: 1px solid #ddd;
}

.status {
background: #2ecc71;
color: #fff;
}

.status.onTime {
background: #ecf0f1;
color: #333;
}

.status.delayed {
background: #f39c12;
}

.status.cancelled {
background: #e74c3c;
}

JSON file (flight.json)
[
  {
    "time": "01:40",
    "destination": "London",
    "gate": "A2",
    "status": "Boarding"
  },
  {
    "time": "01:45",
    "destination": "Moscow",
    "gate": "C4",
    "status": "Boarding"
  },
  {
    "time": "02:45",
    "destination": "Berlin",
    "gate": "A1",
    "status": "On Time"
  },
  {
    "time": "03:30",
    "destination": "Barcelona",
    "gate": "E6",
    "status": "On Time"
  },
  {
    "time": "04:20",
    "destination": "New York",
    "gate": "B5",
    "status": "Delayed"
  },
  {
    "time": "04:40",
    "destination": "Paris",
    "gate": "A7",
    "status": "Cancelled"
  },
  {
    "time": "05:00",
    "destination": "Lisbon",
    "gate": "D3",
    "status": "Cancelled"
  },
  {
    "time": "06:20",
    "destination": "Chicago",
    "gate": "F3",
    "status": "On Time"
  },
  {
    "time": "07:40",
    "destination": "Zurich",
    "gate": "E1",
    "status": "Delayed"
  }
]

Video Tutorial


Updated Code (main.js)
// flight status

// flight status

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if(xhr.readyState === 4) { // request finished and response is now ready
    var flights = JSON.parse(xhr.responseText); // data is ready to be displayed. We'll see in console log
    var statusHTML = '';
    for(var i = 0; i < flights.length; i++) {
      statusHTML += '<tr>';
      statusHTML += '<td>' + flights[i].time + '</td>';
      statusHTML += '<td>' + flights[i].destination + '</td>';
      statusHTML += '<td>' + flights[i].gate + '</td>';
      if(flights[i].status === 'Boarding') {
        statusHTML += '<td class="status">' + flights[i].status + '</td>';
      } else if(flights[i].status === 'On Time') {
        statusHTML += '<td class="status onTime">' + flights[i].status + '</td>';
      } else if(flights[i].status === 'Delayed') {
        statusHTML += '<td class="status delayed">' + flights[i].status + '</td>';
      } else {
        statusHTML += '<td class="status cancelled">' + flights[i].status + '</td>';
      }
      statusHTML += '</tr>';
    }
    document.querySelector('.flightStatus tbody').innerHTML = statusHTML;
  }
}
xhr.open('GET', 'data/flight.json'); // using GET method, we get data from flight.json
xhr.send();

Share this

Related Posts