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. <\/p>\n\n\n\n
For the best troubleshooting experience, make sure you know how to view your Console<\/a>. <\/p>\n\n\n\n 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.<\/p>\n\n\n\n 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 Step 2: Check out this example Step 3: Get some data from the API For the best troubleshooting experience, make sure … Continue reading Exercise: Dawgs<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":3700,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3808","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3808","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/comments?post=3808"}],"version-history":[{"count":13,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3808\/revisions"}],"predecessor-version":[{"id":4696,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3808\/revisions\/4696"}],"up":[{"embeddable":true,"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/pages\/3700"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/advweb\/wp-json\/wp\/v2\/media?parent=3808"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
<button v-on:click=\"showme('cocker')\">Cocker<\/button>\n<button v-on:click=\"showme('brittany')\">Brittany<\/button><\/code><\/pre><\/li>\n\n\n\nmethods: {
showme(breed) {
console.log(\"You clicked \" + breed);
}
}<\/code><\/pre><\/li>\n\n\n\nmethods: {
async showme(breed) {
const response = await axios.get(`https:\/\/dog.ceo\/api\/breed\/spaniel\/${breed}\/images`);
console.log(response.data);
}
}<\/code><\/pre><\/li>\n\n\n\nmethods: {
async showme(breed) {
const response = await axios.get(`https:\/\/dog.ceo\/api\/breed\/spaniel\/${breed}\/images`);
this.info = response.data;<\/strong>
this.moreData = this.info.message;
console.log(this.moreData);<\/strong>
}
}<\/code><\/pre><\/li>\n\n\n\n
Replace your placeholder <div> with this block that loops through moreData and displays each image: <div v-for=\"theBreed in moreData\" :key=\"theBreed\">\n <a :href=\"theBreed\" target=\"_blank\">\n <img :src=\"theBreed\" alt=\"Spaniel image\">\n <\/a>\n<\/div><\/code><\/pre><\/li>\n\n\n\ndata() {
return {
info: null,
moreData: []
}
},
mounted() {
this.showme('cocker');
},
methods: {<\/code><\/pre><\/li>\n<\/ol>\n\n\n\nSlideShows<\/h3>\n\n\n\n
\n
data() {\n return {\n info: null,\n moreData: [],\n selector: 0,\n whichDawg: ''\n }\n}<\/code><\/pre><\/li>\n\n\n\nslider() {\n this.selector++;\n if (this.selector >= this.moreData.length) {\n this.selector = 0;\n }\n}<\/code><\/pre><\/li>\n\n\n\nasync showme(breed) {\n const response = await axios.get(`https:\/\/dog.ceo\/api\/breed\/spaniel\/${breed}\/images`);\n this.info = response.data;\n this.moreData = this.info.message;\n this.whichDawg = breed;\n this.selector = 0;\n this.slider();\n}<\/code><\/pre><\/li>\n\n\n\n<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><\/code><\/pre><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"