{
"name": "JSON APIs and Ajax",
"order": 10.5,
"time": "30m",
"challenges": [
{
"id": "bb000000000000000000001",
"title": "Trigger Click Events with jQuery",
"description": [
"In this section, we'll learn how to get data from APIs. APIs - or Application Programming Interfaces - are tools that computers use to communicate with one another.",
"We'll also learn how to update HTML with the data we get from these APIs using a technology called Ajax.",
"First, let's review what the $(document).ready()
function does. This function makes it so all code inside of it only runs once our page loads.",
"Let's make our \"Get Message\" button change the text of the element with the class message
.",
"Before we can do this, we need to implement a click event
inside of our $(document).ready()
function by adding this code:",
"$(\"#getMessage\").on(\"click\", function(){
",
"",
"});
"
],
"tests": [
"assert(editor.match(/\\$\\s*?\\(\\s*?(?:'|\")\\#getMessage(?:'|\")\\s*?\\)\\s*?\\.on\\s*?\\(\\s*?(?:'|\")click(?:'|\")\\s*?\\,\\s*?function\\s*?\\(\\s*?\\)\\s*?\\{/gi), 'Bind the click event to the button with the ID of getMessage
')",
"assert(editor.match(/\\n*?\\s*?\\}\\n*?\\s*?\\);/gi) && editor.match(/\\n*?\\s*?\\}\\);/gi).length >= 2, 'Be sure to close your functions with });
')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" // Only change code below this line.",
" ",
" // Only change code above this line.",
" });",
"fcces",
"",
"",
"
message
to say \"Here is the message\".",
"We can do this by adding the following code within our click event:",
" $(\".message\").html(\"Here is the message\");
"
],
"tests": [
"assert(editor.match(/\\$\\s*?\\(\\s*?(?:'|\")\\.message(?:'|\")\\s*?\\)\\s*?\\.html\\s*?\\(\\s*?(?:'|\")Here\\sis\\sthe\\smessage(?:'|\")\\s*?\\);/gi), 'Clicking the \"Get Message\" button should give the element with the class message
the text \"Here is the message\".')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
" $(\"#getMessage\").on(\"click\", function(){",
" // Only change code below this line.",
" ",
" // Only change code above this line.",
" });",
" });",
"fcces",
"",
"",
"{
and a }
.",
"These properties and their values are often referred to as \"key-value pairs\".",
"Let's get the JSON from Free Code Camp's Cat Photo API.",
"Here's the code you can put in your click event to do this:",
" $.getJSON(\"/json/cats.json\", function(json) {
",
" $(\".message\").html(JSON.stringify(json));
",
" });
",
"Once you've added this, click the \"Get Message\" button. Your Ajax function will replace the \"The message will go here\" text with the raw JSON output from the Free Code Camp Cat Photo API."
],
"tests": [
"assert(editor.match(/\\$\\s*?\\(\\s*?(\\\"|\\')\\#getMessage(\\\"|\\')\\s*?\\)\\s*?\\.\\s*?on\\s*?\\(\\s*?(\\\"|\\')click(\\\"|\\')\\s*?\\,\\s*?function\\s*?\\(\\s*?\\)\\s*?\\{/gi), 'You should have a click handler on the getMessage button to trigger the AJAX request.')",
"assert(editor.match(/\\s*?\\}\\s*?\\)\\s*?\\;/gi), 'You should have at least one closing set of brackets and parenthesis.')",
"assert(editor.match(/\\s*?\\}\\s*?\\)\\s*?\\;/gi) && editor.match(/\\,\\s*?function\\s*?\\(\\s*?\\w*?\\s*?\\)\\s*?\\{/gi) && editor.match(/\\s*?\\}\\s*?\\)\\s*?\\;/gi).length === editor.match(/\\s*?function\\s*?\\(\\s*?\\w*?\\s*?\\)\\s*?\\{/gi).length, 'Each callback function should have a closing set of brackets and parenthesis.')",
"assert(editor.match(/\\$\\s*?\\.\\s*?getJSON\\s*?\\(\\s*?(\\\"|\\')\\\/json\\\/cats\\.json(\\\"|\\')\\s*?\\,\\s*?function\\s*?\\(\\s*?json\\s*?\\)\\s*?\\{/gi), 'You should be making use of the getJSON method given in the description to load data from the json file.')",
"assert(editor.match(/\\$\\s*?\\(\\s*?(\\\"|\\')\\.message(\\\"|\\')\\s*?\\)\\s*?\\.\\s*?html\\s*?\\(\\s*?JSON\\s*?\\.\\s*?stringify\\s*?\\(\\s*?json\\s*?\\)\\s*?\\)/gi), 'Don\\'t forget to make the .html
change the contents of the message box so that it contains the result of the getJSON.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
"",
" $(\"#getMessage\").on(\"click\", function(){",
" // Only change code below this line.",
" ",
" ",
" ",
" // Only change code above this line.",
" });",
"",
" });",
"fcces",
"",
".forEach()
method to loop through our data and modify our HTML elements.",
"First, let's declare an html variable with var html = \"\";
.",
"Then, let's loop through our JSON, adding more HTML to that variable. When the loop is finished, we'll render it.",
"Here's the code that does this:",
"json.forEach(function(val) {
",
" var keys = Object.keys(val);
",
" html += \"<div class = 'cat'>\";
",
" keys.forEach(function(key) {
",
" html += \"<b>\" + key + \"</b>: \" + val[key] + \"<br>\";
",
" });
",
" html += \"</div><br>\";
",
"});
"
],
"tests": [
"assert(editor.match(/json\\.forEach/gi), 'The message box should have something in it.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
"",
" $(\"#getMessage\").on(\"click\", function() {",
" $.getJSON(\"/json/cats.json\", function(json) {",
"",
" var html = \"\";",
" // Only change code below this line.",
" ",
" ",
" ",
" // Only change code above this line.",
"",
" $(\".message\").html(html);",
"",
" });",
" });",
" });",
"fcces",
"",
"imageLink
key with a value that is the url of a cat's image.",
"When we're looping through these objects, let's use this imageLink
property to display this image in an img
element.",
"Here's the code that does this:",
" html += \"<img src = '\" + val.imageLink + \"'>\";
"
],
"tests": [
"assert(editor.match(/val.imageLink/gi), 'You should have used the imageLink
property to display the images.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
"",
" $(\"#getMessage\").on(\"click\", function() {",
" $.getJSON(\"/json/cats.json\", function(json) {",
"",
" var html = \"\";",
"",
" json.map(function(val) {",
"",
" html += \"json = json.filter(function(val) {
",
" return(val.id !== 1);
",
"});
"
],
"tests": [
"assert(editor.match(/filter/gi), 'You should be making use of the .filter method.')"
],
"challengeSeed": [
"fccss",
" $(document).ready(function() {",
"",
" $(\"#getMessage\").on(\"click\", function() {",
" $.getJSON(\"/json/cats.json\", function(json) {",
"",
" var html = \"\";",
"",
" // Only change code below this line.",
" ",
" ",
" ",
" // Only change code above this line.",
"",
" json.map(function(val){",
"",
" html += \"if (navigator.geolocation) {
",
" navigator.geolocation.getCurrentPosition(function(position) {
",
" $(\"#data\").html(\"latitude: \" + position.coords.latitude + \"<br>longitude: \" + position.coords.longitude);
",
" });
",
"}
"
],
"tests": [
"assert(editor.match(/navigator\\.geolocation\\.getCurrentPosition/gi), 'You should make use of the navigator.geolocation
to access the users current location.')"
],
"challengeSeed": [
"fccss",
" // Only change code below this line.",
" ",
" ",
" ",
" // Only change code above this line.",
"fcces",
"