santosh/AsteroidGrid.js

## AsteroidGrid.js
// requires Vue.js and Bootstrap
Vue.component('asteroid-grid', {
  props: ['asteroids', 'header'],
  data: function () {
    return {
      showSummary: true
    }
  },
  computed: {
    numAsteroids: function () {
      return this.asteroids.length;
    },
    closestObject: function () {
      var neosHavingData = this.asteroids.filter(function (neo) {
        return neo.close_approach_data.length > 0;
      });
      var simpleNeos = neosHavingData.map(function (neo) {
        return { name: neo.name, miles: neo.close_approach_data[0].miss_distance.miles };
      });
      var sortedNeos = simpleNeos.sort(function (a, b) {
        return a.miles - b.miles;
      });
      return sortedNeos[0].name;
    }
  },
  methods: {
    getCloseApproachDate: function (a) {
      if (a.close_approach_data.length > 0) {
        return a.close_approach_data[0].close_approach_date;
      }
      return 'N/A';
    },
    getRowStyle: function (a) {
      if (a.close_approach_data.length == 0) {
        return {
          border: 'solid 2px red',
          color: 'red'
        }
      }
    },
    remove: function (index) {
      this.$emit('remove', index)
    },
    isMissingData: function (a) {
      return a.close_approach_data.length == 0;
    }
  },
  template: '<div class="card mt-5"> \
                  <h2 class="card-header"> {{ header }}</h2> \
                  <transition name="shooting-star"> \
                      <div class="mt-3 ml-3" v-cloak v-if="numAsteroids > 0 && showSummary"> \
                          <p>showing {{numAsteroids}} items</p> \
                          <p>{{closestObject}} has the smallest miss distance.</p> \
                      </div> \
                  </transition> \
                  <div class="m-3"> \
                      <a href="#" @click="showSummary = !showSummary">Show/hide summary</a> \
                  </div> \
                  <table class="table table-striped" :class="[{\'table-dark\': false}, \'table-bordered\']"> \
                      <thead class="thead-light"> \
                          <th>#</th> \
                          <th>Name</th> \
                          <th>Close Approach Date</th> \
                          <th>Miss Distance</th> \
                          <th>Remove</th> \
                      </thead> \
                      <tbody is="transition-group" name="neo-list" v-cloak> \
                          <tr v-for="(a, index) in asteroids" \
                              :key="a.neo_reference_id" \
                              :class="{highlight: isMissingData(a), \'shadow-sm\': true}"> \
                              <td>{{index + 1}}</td> \
                              <td>{{a.name}}</td> \
                              <td>{{getCloseApproachDate(a)}}</td> \
                              <td> \
                                  <ul v-if="a.close_approach_data.length > 0"> \
                                      <li v-for="(value, key) in a.close_approach_data[0].miss_distance"> \
                                          {{key}}: {{value}} \
                                      </li> \
                                  </ul> \
                              </td> \
                              <td><button class="btn btn-warning" @click="remove(index)">remove</button></td> \
                           </tr> \
                      </tbody> \
                  </table> \
              </div>'
});

## index.html
<!DOCTYPE html>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">

<div id="app">
  <div class="container">
    <asteroid-grid @remove="remove" :asteroids="asteroids" header="Near-Earth Object"></asteroid-grid>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="AsteroidGrid.js"></script>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      asteroids: []
    },
    created: function () {
      this.fetchAsteroids();
    },
    methods: {
      fetchAsteroids: function () {
        var apiKey = '';
        var url = 'https://api.nasa.gov/neo/rest/v1/neo/browse?api_key=' + apiKey;
        axios.get(url)
          .then(function (res) {
            vm.asteroids = res.data.near_earth_objects.slice(0, 10);
          });
      },
      remove: function (index) {
        this.asteroids.splice(index, 1);
      },
    }
  });
</script>
	// requires Vue.js and Bootstrap
	Vue.component('asteroid-grid', {
	props: ['asteroids', 'header'],
	data: function () {
	return {
	showSummary: true
	}
	},
	computed: {
	numAsteroids: function () {
	return this.asteroids.length;
	},
	closestObject: function () {
	var neosHavingData = this.asteroids.filter(function (neo) {
	return neo.close_approach_data.length > 0;
	});
	var simpleNeos = neosHavingData.map(function (neo) {
	return { name: neo.name, miles: neo.close_approach_data[0].miss_distance.miles };
	});
	var sortedNeos = simpleNeos.sort(function (a, b) {
	return a.miles - b.miles;
	});
	return sortedNeos[0].name;
	}
	},
	methods: {
	getCloseApproachDate: function (a) {
	if (a.close_approach_data.length > 0) {
	return a.close_approach_data[0].close_approach_date;
	}
	return 'N/A';
	},
	getRowStyle: function (a) {
	if (a.close_approach_data.length == 0) {
	return {
	border: 'solid 2px red',
	color: 'red'
	}
	}
	},
	remove: function (index) {
	this.$emit('remove', index)
	},
	isMissingData: function (a) {
	return a.close_approach_data.length == 0;
	}
	},
	template: '<div class="card mt-5"> \
	<h2 class="card-header"> {{ header }}</h2> \
	<transition name="shooting-star"> \
	<div class="mt-3 ml-3" v-cloak v-if="numAsteroids > 0 && showSummary"> \
	<p>showing {{numAsteroids}} items</p> \
	<p>{{closestObject}} has the smallest miss distance.</p> \
	</div> \
	</transition> \
	<div class="m-3"> \
	<a href="#" @click="showSummary = !showSummary">Show/hide summary</a> \
	</div> \
	<table class="table table-striped" :class="[{\'table-dark\': false}, \'table-bordered\']"> \
	<thead class="thead-light"> \
	<th>#</th> \
	<th>Name</th> \
	<th>Close Approach Date</th> \
	<th>Miss Distance</th> \
	<th>Remove</th> \
	</thead> \
	<tbody is="transition-group" name="neo-list" v-cloak> \
	<tr v-for="(a, index) in asteroids" \
	:key="a.neo_reference_id" \
	:class="{highlight: isMissingData(a), \'shadow-sm\': true}"> \
	<td>{{index + 1}}</td> \
	<td>{{a.name}}</td> \
	<td>{{getCloseApproachDate(a)}}</td> \
	<td> \
	<ul v-if="a.close_approach_data.length > 0"> \
	<li v-for="(value, key) in a.close_approach_data[0].miss_distance"> \
	{{key}}: {{value}} \
	</li> \
	</ul> \
	</td> \
	<td><button class="btn btn-warning" @click="remove(index)">remove</button></td> \
	</tr> \
	</tbody> \
	</table> \
	</div>'
	});
	<!DOCTYPE html>

	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
	<link rel="stylesheet" href="style.css">

	<div id="app">
	<div class="container">
	<asteroid-grid @remove="remove" :asteroids="asteroids" header="Near-Earth Object"></asteroid-grid>
	</div>
	</div>

	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="AsteroidGrid.js"></script>
	<script>
	var vm = new Vue({
	el: '#app',
	data: {
	asteroids: []
	},
	created: function () {
	this.fetchAsteroids();
	},
	methods: {
	fetchAsteroids: function () {
	var apiKey = '';
	var url = 'https://api.nasa.gov/neo/rest/v1/neo/browse?api_key=' + apiKey;
	axios.get(url)
	.then(function (res) {
	vm.asteroids = res.data.near_earth_objects.slice(0, 10);
	});
	},
	remove: function (index) {
	this.asteroids.splice(index, 1);
	},
	}
	});
	</script>