App.vue
bigLandMammals.json
main.js
<template>
<div>
<button @click="fetchData">Fetch Data</button>
<pre v-if="data">{{ data }}</pre>
</div>
</template>
<script>
export default {
data() {
return {
data: null,
};
},
methods: {
async fetchData() {
const response = await fetch("bigLandMammals.json");
this.data = await response.json();
}
}
};
</script>
{
"results": [
{
"name": "African elephant",
"maxWeight": 10000,
"carnivore": false,
"countries": [
"Namibia",
"Angola",
"Tanzania",
"Kenya",
"Mozambique",
"Botswana",
"South-Africa"
]
},
{
"name": "Siberian tiger",
"maxWeight": 300,
"carnivore": true,
"countries": [
"Russia",
"North Korea",
"China"
]
},
{
"name": "American bison",
"maxWeight": 1200,
"carnivore": false,
"countries": [
"USA",
"Canada"
]
},
{
"name": "Polar bear",
"maxWeight": 1000,
"carnivore": true,
"countries": [
"USA",
"Canada",
"Norway",
"Russia",
"Greenland"
]
},
{
"name": "Gaur",
"maxWeight": 1500,
"carnivore": false,
"countries": [
"India",
"Thailand",
"Laos",
"Cambodia",
"Vietnam",
"Myanmar",
"Malaysia",
"China",
"Bhutan",
"Nepal"
]
}
]
}
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')