{"componentChunkName":"component---src-templates-challenges-classic-show-tsx","path":"/learn/data-visualization/json-apis-and-ajax/render-images-from-data-sources","result":{"data":{"challengeNode":{"challenge":{"block":"json-apis-and-ajax","demoType":null,"title":"Render Images from Data Sources","description":"<section id=\"description\">\n<p>The last few challenges showed that each object in the JSON array contains an <code>imageLink</code> key with a value that is the URL of a cat's image.</p>\n<p>When you're looping through these objects, you can use this <code>imageLink</code> property to display this image in an <code>img</code> element.</p>\n<p>Here's the code that does this:</p>\n<pre><code class=\"language-js\">html += \"&#x3C;img src = '\" + val.imageLink + \"' \" + \"alt='\" + val.altText + \"'>\";\n</code></pre>\n</section>","id":"587d7fae367417b2b2512be6","hasEditableBoundaries":false,"instructions":"<section id=\"instructions\">\n<p>Add code to use the <code>imageLink</code> and <code>altText</code> properties in an <code>img</code> tag.</p>\n</section>","notes":null,"challengeType":6,"helpCategory":"JavaScript","videoUrl":null,"superBlock":"data-visualization","translationPending":false,"forumTopicId":18265,"hooks":null,"fields":{"slug":"/learn/data-visualization/json-apis-and-ajax/render-images-from-data-sources"},"required":[{"link":"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css","src":null}],"usesMultifileEditor":false,"challengeFiles":[{"fileKey":"indexhtml","ext":"html","name":"index","contents":"<script>\n  document.addEventListener('DOMContentLoaded', function () {\n    document.getElementById('getMessage').onclick = function () {\n      const req = new XMLHttpRequest();\n      req.open('GET', '/json/cats.json', true);\n      req.send();\n      req.onload = function () {\n        const json = JSON.parse(req.responseText);\n        let html = '';\n        json.forEach(function (val) {\n          html += \"<div class = 'cat'>\";\n          // Add your code below this line\n\n          // Add your code above this line\n          html += '</div><br>';\n        });\n        document.getElementsByClassName('message')[0].innerHTML = html;\n      };\n    };\n  });\n</script>\n\n<style>\n  body {\n    text-align: center;\n    font-family: 'Helvetica', sans-serif;\n  }\n  h1 {\n    font-size: 2em;\n    font-weight: bold;\n  }\n  .box {\n    border-radius: 5px;\n    background-color: #eee;\n    padding: 20px 5px;\n  }\n  button {\n    color: white;\n    background-color: #4791d0;\n    border-radius: 5px;\n    border: 1px solid #4791d0;\n    padding: 5px 10px 8px 10px;\n  }\n  button:hover {\n    background-color: #0f5897;\n    border: 1px solid #0f5897;\n  }\n</style>\n<h1>Cat Photo Finder</h1>\n<p class=\"message box\">The message will go here</p>\n<p>\n  <button id=\"getMessage\">Get Message</button>\n</p>","head":null,"tail":null,"editableRegionBoundaries":[],"history":["index.html"]}],"saveSubmissionToDB":null,"tests":[{"text":"<p>You should use the <code>imageLink</code> property to display the images.</p>","testString":"assert.match(code, /val\\.imageLink/g);"},{"text":"<p>You should use the <code>altText</code> for the <code>alt</code> attribute values of the images.</p>","testString":"assert.match(code, /val\\.altText/g);"}]}}},"pageContext":{"challengeMeta":{"blockHashSlug":"/learn/data-visualization/#json-apis-and-ajax","dashedName":"render-images-from-data-sources","certification":"data-visualization","disableLoopProtectTests":false,"disableLoopProtectPreview":false,"superBlock":"data-visualization","chapter":null,"module":null,"block":"json-apis-and-ajax","isFirstStep":false,"template":null,"required":[{"link":"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css","src":null}],"isLastChallengeInBlock":false,"nextChallengePath":"/learn/data-visualization/json-apis-and-ajax/pre-filter-json-to-get-the-data-you-need","prevChallengePath":"/learn/data-visualization/json-apis-and-ajax/convert-json-data-to-html","id":"587d7fae367417b2b2512be6","saveSubmissionToDB":null},"projectPreview":{"challengeData":{"challengeType":6,"challengeFiles":[{"name":"index","ext":"html","contents":"<script>\n  document.addEventListener('DOMContentLoaded', function () {\n    document.getElementById('sendMessage').onclick = function () {\n      const userName = document.getElementById('name').value;\n      const url = 'https://jsonplaceholder.typicode.com/posts';\n      // Add your code below this line\n      const xhr = new XMLHttpRequest();\n      xhr.open('POST', url, true);\n      xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');\n      xhr.onreadystatechange = function () {\n        if (xhr.readyState === 4 && xhr.status === 201) {\n          const serverResponse = JSON.parse(xhr.response);\n          document.getElementsByClassName('message')[0].textContent =\n            serverResponse.userName + serverResponse.suffix;\n        }\n      };\n      const body = JSON.stringify({\n        userName: userName,\n        suffix: ' loves cats!'\n      });\n      xhr.send(body);\n      // Add your code above this line\n    };\n  });\n</script>\n\n<style>\n  body {\n    text-align: center;\n    font-family: 'Helvetica', sans-serif;\n  }\n  h1 {\n    font-size: 2em;\n    font-weight: bold;\n  }\n  .box {\n    border-radius: 5px;\n    background-color: #eee;\n    padding: 20px 5px;\n  }\n  button {\n    color: white;\n    background-color: #4791d0;\n    border-radius: 5px;\n    border: 1px solid #4791d0;\n    padding: 5px 10px 8px 10px;\n  }\n  button:hover {\n    background-color: #0f5897;\n    border: 1px solid #0f5897;\n  }\n</style>\n\n<h1>Cat Friends</h1>\n<p class=\"message\">Reply from Server will be here</p>\n<p>\n  <label for=\"name\"\n    >Your name:\n    <input type=\"text\" id=\"name\" />\n  </label>\n  <button id=\"sendMessage\">Send Message</button>\n</p>","history":["index.html"],"fileKey":"indexhtml"}]}},"id":"/learn/data-visualization/json-apis-and-ajax/render-images-from-data-sources"}},"staticQueryHashes":["1627783667"],"slicesMap":{}}