Last active
December 15, 2016 02:58
-
-
Save tbywong/1645e9faaf6f991c3a515690d884099a to your computer and use it in GitHub Desktop.
Framework Day 10 Exercise
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Class 10 - Framework</title> | |
</head> | |
<body> | |
<h1>AJAX DOM Manipulation</h1> | |
<div class="users"> | |
<h3>Users: </h3> | |
</div> | |
</body> | |
<script src="https://code.jquery.com/jquery-3.1.0.js"></script> | |
<script src="script.js"></script> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var apiUrl = 'https://jsonplaceholder.typicode.com/users'; | |
// SOLUTION: | |
$.get(apiUrl, function (data) { | |
// The variable "data" represents the response we get back from our api | |
console.log('Here is our response data: ', data); | |
// Create a new array to hold our array of names | |
var namesArray = []; | |
// Loop through our data array and push the name in each object into our new array | |
for (var i = 0; i < data.length; i++) { | |
namesArray.push(data[i].name); | |
} | |
// Now, we have an array with the names from our API | |
console.log('Here is our new names array: ', namesArray); | |
// Append an unordered list tag to the end of the div with class name "user" | |
$('.users').append('<ul id="list"></ul>'); | |
// Loop through our new namesArray and append a new list item to the unordered list we created | |
for (var i = 0; i < namesArray.length; i++) { | |
var listItem = '<li>' + namesArray[i] + '</li>'; | |
// Each item in the namesArray is a string, so we can just add the strings together! | |
$('#list').append(listItem); | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment