-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathneo-api.html
123 lines (119 loc) · 4.73 KB
/
neo-api.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<head>
<style>
[v-cloak] {
display: none;
}
.highlight {
border: solid 3px red;
color: red;
}
</style>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<body>
<div id="app">
<div class="container">
<div class="card mt-5">
<h2 class="card-header">Near-Earth Objects</h2>
<div class="m-3" v-if="numAstroids > 0 && showSummary">
<p>showing {{numAstroids}} items</p>
<p>{{closestObject.name}} has the shortest miss distance of {{closestObject.miles}} miles.</p>
</div>
<div class="m-3">
<a href="#" @click="showSummary = !showSummary">Show/hide summary</a>
</div>
<table class="table table-striped table-bordered">
<thead class="thead-dark">
<th>#</th>
<th>Name</th>
<th>Size</th>
<th>Close Approach Date</th>
<th>Miss Distance</th>
<th>Remove</th>
</thead>
<tbody v-cloak>
<tr v-for="(a, index) in asteroids" :key="a.neo_reference_id" :class="{highlight: isMissingData(a)}">
<td>{{index + 1}}</td>
<td>{{a.name}}</td>
<td>{{getObjectSize(a)}}</td>
<td>{{getCloseApproachDate(a)}}</td>
<td>
<ul v-if="a.close_approach_data.length">
<li v-for="(value, key) in a.close_approach_data[0].miss_distance">
{{key}}: {{value}}
</li>
</ul>
</td>
<td>
<button @click="remove(index)" class="btn btn-warning">remove</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
asteroids: [],
showSummary: true
},
computed: {
numAstroids: function () {
return this.asteroids.length;
},
closestObject: function() {
var neosHavingData = this.asteroids.filter(function (neo) {
return neo.close_approach_data.length > 0;
});
var neosDistance = neosHavingData.map(function (neo) {
return {
name: neo.name,
miles: neo.close_approach_data[0].miss_distance.miles,
};
});
var sortedNeos = neosDistance.sort(function (a, b) {
return a.miles - b.miles;
});
return {name: sortedNeos[0].name, miles: parseFloat(sortedNeos[0].miles).toLocaleString()};
}
},
created: function () {
this.fetchAstroids();
},
methods: {
fetchAstroids: function () {
var apiKey = "h0k3AcqCkTZRwKjR6Hi6ep1LFGoQ7niMqoqAG4UH";
var url = "https://api.nasa.gov/neo/rest/v1/neo/browse?api_key=" + apiKey;
axios.get(url)
.then(function (res) {
console.log(res);
vm.asteroids = res.data.near_earth_objects.slice(0, 50);
});
},
getObjectSize: function (a) {
var diameter = parseFloat(a.estimated_diameter.kilometers.estimated_diameter_max)
return diameter.toPrecision(3) + " km"
},
getCloseApproachDate: function (a) {
if (a.close_approach_data.length > 0) {
return a.close_approach_data[0].close_approach_date;
} else {
return "N/A";
}
},
remove: function (index) {
this.asteroids.splice(index, 1)
},
isMissingData: function (a) {
return a.close_approach_data.length == 0;
}
}
});
</script>