Coding Challenge – Airport Distance Calculation

Create the JavaScript web application which auto completes airport names for all international airports and calculates the distance between two airports once selected.

To Solve this problem first we need to create the UI which allows us to search Airport. Once we have UI we need to fetch the airport data and compares it with user input and display the suggestions.

Here is the HTML template which create Airport Search UI:

<!DOCTYPE html>
<html>

<head>
  <script src="autocomplete.js"></script>

</head>

<body>
  <div id="map"></div>
  <p>
    Please Enter Origin Airport
  </p>
  <div id="autocomplete-container">
    <p>Modify the text in the input field, then click outside the field to fire the onchange event.</p>

    Enter some text: <input type="text" name="txt" onchange="autoData(this.value)">

    <ul id="autocomplete-results"></ul>
  </div>

</body>

</html>

Here is the Javascript to calculate Suggestions from the Airport Data:


const autoData = (val) => {
fetch('airport.json')
.then(
  function(response) {
    if (response.status !== 200) {
      console.log('Looks like there was a problem. Status Code: ' +
        response.status);
      return;
    }

    // Examine the text in the response
    response.json().then(function(data) {
      let dataArr = autocomplete(val, data);
      dataArr.map(m => {
        const liTag = document.createElement('li');
        liTag.innerHTML= m.name;
        document.getElementById('autocomplete-results').appendChild(liTag);
      })
    });
  }
)
.catch(function(err) {
  console.log('Fetch Error :-S', err);
});
}

const autocomplete = (val, data) => {
  var people_return = [];

  for (i = 0; i < data.length; i++) {
    let currAirport = data[i].code.toLowerCase();
    console.log(val);
    if (val === currAirport.slice(0, data.length)) {
      people_return.push(data[i]);
    }
  }

  return people_return;
}

Here are the Airport JSON Data for the Airports:

[
    {
      "code":"ABE",
      "name":"Lehigh Valley International Airport",
      "city":"Allentown",
      "state":"PA",
      "statename":"Pennsylvania",
      "lat":40.6514,
      "lng":-75.4342,
      "search":"abe|lehighvalleyinternationalairport|allentownpa|pennsylvania"
    },
    {
      "code":"ABI",
      "name":"Abilene Regional Airport",
      "city":"Abilene",
      "state":"TX",
      "statename":"Texas",
      "lat":32.4164,
      "lng":-99.6803,
      "search":"abi|abileneregionalairport|abilenetx|texas"
    },