michelleroth/index.html

## index.html
<!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>

## script.js
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);
    }
});
	<!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>
	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);
	}
	});