<template>
  <p>Try clicking the button more than once to see new animals picked randomly.</p>
  <button @click="fetchData">Fetch Data</button>
  <div v-if="randomMammal">
    <h2>{{ randomMammal.name }}</h2>
    <p>Max weight: {{ randomMammal.maxWeight }} kg</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      randomMammal: null
    };
  },
  methods: {
    async fetchData() {
      const response = await fetch("bigLandMammals.json");
      const data = await response.json();
      const randIndex = Math.floor(Math.random()*data.results.length);
      this.randomMammal = data.results[randIndex];
    }
  }
};
</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')