Exercise: Dawgs

We are going to explore the process of capturing and displaying information from The Dog Api, a site that lists and shares pictures of zillions of dog breeds.

Step 1: Check out the API

To begin, take a look at the following URL: https://dog.ceo/api/breed/spaniel/list . When you visit the URL you should see an object containing a list of spaniels just like this one:
Now visit https://dog.ceo/api/breed/spaniel/images where you will see an object with the same structure that contains a long list of spaniel image urls. The dog api contains MANY more dogs and images, ranging from Airedales to Whippets, but let’s focus on Spaniels to keep the pack size manageable.

Step 2: Check out this example

To get started download dawgs.zip and move both files into your work folder. Open both and take a look.
In the HTML:
- You’ll see that we import Vue and Axios (a library that helps Vue get data from APIs).
  - The <div id=”app”> section uses v-on:click to call the function showme() when a button is clicked.
In Dawgs.js, we create a Vue instance.
- The data() function must return an object for Axios to work properly.
- The mounted() section acts like document.ready() in jQuery—it waits until the page is loaded before running any code.
- The async and await keywords tell the browser to wait for the data to load before continuing (otherwise, Vue would try to use data that doesn’t exist yet).

Step 3: Get some data from the API

For the best troubleshooting experience, make sure you know how to view your Console.

First, let’s use the v-on:click function to talk to a method that we will build to talk to the buttons.

<button v-on:click="showme('cocker')">Cocker</button>
<button v-on:click="showme('brittany')">Brittany</button>

Inside the methods section, create the showme() function that logs the breed name to the console. This tests that our buttons are working. You should see “You clicked cocker” and “You clicked spaniel” in the Console when you inspect.
```
methods: {
  showme(breed) {
    console.log("You clicked " + breed);
  }
}
```

Turn showme() into an async function, use axios.get() to fetch data, and print it to the console. In the console, you’ll see a big object with lots of image URLs.

methods: {
  async showme(breed) {
    const response = await axios.get(`https://dog.ceo/api/breed/spaniel/${breed}/images`);
    console.log(response.data);
  }
}

Now that we know the data loads, we need to store it in Vue so that we can show it on the webpage. Store the response data in this.info, and use the message array to populate moreData.

methods: {
  async showme(breed) {
    const response = await axios.get(`https://dog.ceo/api/breed/spaniel/${breed}/images`);
    this.info = response.data;
    this.moreData = this.info.message;
    console.log(this.moreData);
  }
}

Now that moreData holds our image URLs, let’s loop through them in the HTML.
Replace your placeholder <div> with this block that loops through moreData and displays each image:
```
<div v-for="theBreed in moreData" :key="theBreed">
  <a :href="theBreed" target="_blank">
    <img :src="theBreed" alt="Spaniel image">
  </a>
</div>
```
Clicking the Cocker or Brittany button should now display a wall of adorable spaniel photos! Now, let’s use mounted() to load one breed automatically when the page loads. Add a mounted() section that runs once when Vue is ready.
```
data() {
      return {
        info: null,
        moreData: []
      }
    },

    mounted() {
      this.showme('cocker');
    },

    methods: {
```

SlideShows

To begin, save your html file as slideshow.html, your js file as slideshow.js and connect the two. This way you don’t have to overwrite your previous work.

Add new data properties. We’ll track which image we’re showing (selector) and which dog breed we’re currently viewing (whichDawg).
```
data() {
  return {
    info: null,
    moreData: [],
    selector: 0,
    whichDawg: ''
  }
}
```
Create the slider() method. The slider() method will change the currently displayed image by updating selector. Then we’ll use it inside showme() to start the slideshow automatically. Add this below the existing showme() method.
```
slider() {
  this.selector++;
  if (this.selector >= this.moreData.length) {
    this.selector = 0;
  }
}
```

Now we’ll make showme() remember which breed is being shown and call the new slider() function. Update showme():

async showme(breed) {
  const response = await axios.get(`https://dog.ceo/api/breed/spaniel/${breed}/images`);
  this.info = response.data;
  this.moreData = this.info.message;
  this.whichDawg = breed;
  this.selector = 0;
  this.slider();
}

Update the HTML to include slideshow buttons and the current image. I threw in a fun extra styling decision, an all-caps title.

<div id="app">
    <button v-on:click="showme('cocker')">Cocker</button>
    <button v-on:click="showme('brittany')">Brittany</button>

    <div v-if="moreData.length > 0">
      <h3>{{ whichDawg.toUpperCase() }} SPANIEL</h3>
      <a :href="moreData[selector]" target="_blank">
        <img :src="moreData[selector]" alt="Current spaniel image">
      </a>
      <br>
      <button v-on:click="slider()">Next</button>
    </div>
  </div>