vue axios

by roy barak

HTML

<script src="https://unpkg.com/axios@0.16.1/dist/axios.min.js"></script>
<link rel="stylesheet" href="https://blackrockdigital.github.io/startbootstrap-shop-item/vendor/bootstrap/css/bootstrap.min.css">
 <div class="container" id="app">

    <div class="row">

      <div class="col-lg-9">

        <div class="card mt-4">

          <div class="card-body">
              <template id="page-title">
                  <h2>{{ pageTitle }}</h2>
                </template>
          </div>
          <div v-if="!isSelectedCity">
          <img class="card-img-top img-fluid" src="International_Space_Station_after_undocking_of_STS-132.jpg" alt="">
        </div>
        <div v-if="!!isSelectedCity">
          {{apiData|json}}
          <cell></cell>
            <table class="table table-striped">
                <thead>
                  <tr>
                    <th>Rise</th>
                    <th>Duration</th>
                    <th>Day/Night</th>
                  </tr>
                </thead>
                <tbody>
                  <!-- <tr>
                    <td>John</td>
                    <td>Doe</td>
                    <td>john@example.com</td>
                  </tr> -->
                
                </tbody>
              </table>
          </div>
        </div>

      </div>

      <div class="col-lg-3">
          <div class="card mt-4">
        <div class="list-group">
         
            <template id="city-select">
            
              <select v-model="selected" @change="onChange($event.target.value)" class="form-control">
                  <option v-for="city in cities" :value="JSON.stringify(city)" :key="city.id">
                    {{ city.cityName }}
                  </option>
                </select>
            </template>

          </div>
        </div>
      </div>

    </div>

  </div>

JavaScript

Vue.component('page-title', {
  template: '#page-title',
  props: ['pageTitle']

});



Vue.component('city-select', {
  template: '#city-select',
  props: ['cities'],
  created: function () {
    this.selected = this.cities.find(i => i.id === this.selected);
  }

})
Vue.component("cell", {
  template: '<ul>'
  +'<li v-for="foo of apiData">'
    +' {{foo}} '+
 '</li></ul>' 
,
 
  props:['apiData']
  
})

var vm = new Vue({
  el: '#app',
  data: {
    function() {
      return {apiData: []}  
    },
    pageTitle: "When can I see the ISS (International Space Station)?",
    map: null,
    tileLayer: null,
    apiData: {},
    isSelectedCity: false,
    cities: [{
        id: 0,
        cityName: 'Select a city',
        cityLocation: null
      },
      {
        id: 1,
        cityName: 'Tel Aviv',
        cityLat: '32.0853',
        cityLon: '34.7818'
      },
      {
        id: 2,
        cityName: 'London',
        cityLat: '51.5074',
        cityLon: '-0.1278'
      },
      {
        id: 3,
        cityName: 'New York',
        cityLat: '40.7128',
        cityLon: '-74.0060'
      },
    ],
    selected: 0
  },
   mounted() {


   },
  methods: {

    getPassData(prmCity) {

      var selectedCityObj = JSON.parse(prmCity);

      //console.log(prmCity);

      axios.get('https://cors-anywhere.herokuapp.com/http://api.open-notify.org/iss-pass.json?', {

          params: {
            lat: selectedCityObj.cityLat,
            lon: selectedCityObj.cityLon,
          },
        })
        .then(function (response) {

          this.apiData =  response.data.response;
         
          console.log( this.apiData);
        })
        .catch(function (error) {
          console.log(error);
        });

    },


    onChange(prmCityObj) {
      var selectedCityObj = JSON.parse(prmCityObj);

      //console.log(selectedCityObj)
      if (selectedCityObj.id > 0) {

        this.pageTitle = 'The next 10 passes of the International Space Station ' +
          'over '...