Question 193307 in PHP Question posted in
Official manual can be found here.

Php – Read data.json from HTML search flights file

I have a data.json file. I created an HTML file search to read the data.json file, but it does not work. Can I get help in creating a file that contains a search for flights that is in my Data Jenson file?

Thank you

This is my data.json file

{
  "data": [
    {
      "City/Airport": "Aarhus",
      "Country": "Denmark",
      "IATA code": "AAR"
    },
    {
      "City/Airport": "Abadan",
      "Country": "Iran",
      "IATA code": "ABD"
    },
    {
      "City/Airport": "Abeche",
      "Country": "Chad",
      "IATA code": "AEH"
    }
}

This is my HTML search form

<!DOCTYPE html>
<html>
<head>
<title>Flight Search</title>
</head>
<body>
<h1>Flight Search</h1>
<select name="from" id="from" type="search">
  <option value="">Select a city</option>
  <?php
    $data = require('./data.json');
    foreach ($data as $city) {
      echo '<option value="' . $city['iataCode'] . '">' . $city['city'] . ', ' . $city['country'] . '</option>';
    }
    ?>
  </select>
  
  <select name="to" id="to" type="search">
    <option value="">Select a city</option>
    <?php
    $data = require('./data.json');
    foreach ($data as $city) {
      echo '<option value="' . $city['iataCode'] . '">' . $city['city'] . ', ' . $city['country'] . '</option>';
    }
    ?>
  </select>
  
  <input type="submit" value="Search">
</form>

<script>
const data = require('./data.json');

const cities = [];

for (const city of data) {
  cities.push({
    name: city.City/Airport,
    country: city.Country,
    iataCode: city.IATA code
  });
}

const from = document.getElementById('from');
const to = document.getElementById('to');

from.addEventListener('change', () => {
  const iataCode = from.options[from.selectedIndex].value;
  const city = cities.find(city => city.iataCode === iataCode);
  document.getElementById('fromLabel').textContent = city.name;
});

to.addEventListener('change', () => {
  const iataCode = to.options[to.selectedIndex].value;
  const city = cities.find(city => city.iataCode === iataCode);
  document.getElementById('toLabel').textContent = city.name;
});
</script>
</body>
</html>

I want to fix errors that do not work on my local server, thank you

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    OK, it is working now. I just want the field to include search not select. I could not modify the HVML file. enter image description here


  2. 0

    1. Remove the PHP code and replace it with JavaScript to fetch and parse the JSON data.

    2. Update the JSON structure in your data.json file to be an array of objects directly, without the "data" key.

    <!DOCTYPE html>
<html>
<head>
  <title>Flight Search</title>
</head>
<body>
  <h1>Flight Search</h1>
  <form>
    <select name="from" id="from" type="search">
      <option value="">Select a city</option>
    </select>
  
    <select name="to" id="to" type="search">
      <option value="">Select a city</option>
    </select>
  
    <input type="submit" value="Search">
  </form>

  <script>
    // Fetch the JSON data
    fetch('./data.json')
      .then(response => response.json())
      .then(data => {
        const cities = data;

        const from = document.getElementById('from');
        const to = document.getElementById('to');

        // Populate the "from" and "to" dropdowns
        for (const city of cities) {
          const option = document.createElement('option');
          option.value = city['IATA code'];
          option.textContent = city['City/Airport'] + ', ' + city['Country'];

          from.appendChild(option.cloneNode(true));
          to.appendChild(option);
        }

        // Event listeners
        from.addEventListener('change', () => {
          const iataCode = from.options[from.selectedIndex].value;
          const city = cities.find(city => city['IATA code'] === iataCode);
          document.getElementById('fromLabel').textContent = city['City/Airport'];
        });

        to.addEventListener('change', () => {
          const iataCode = to.options[to.selectedIndex].value;
          const city = cities.find(city => city['IATA code'] === iataCode);
          document.getElementById('toLabel').textContent = city['City/Airport'];
        });
      })
      .catch(error => {
        console.error('Error fetching JSON data:', error);
      });
  </script>
</body>
</html>

    Make sure your data.json file contains an array of objects without the "data" key. Each object should have the keys "City/Airport", "Country", and "IATA code".

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search