js-debug-day.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Book sharing - Debug Day</title>
    <script src="jquery-3.2.1.min.js"></script>
</head>
<body>

    <h1>See your friend's books</h1>
    <form>
        <label for="friend">Choose</label>
        <select id="friend" name="friend">
            <option value="">Friend</option>
        </select>
        <input type="button" value="Search">
    </form>

    <div id="books"></div>


    <script>
        var friends = [
            { // 1
                name: 'Oliver',
                books: ['Ansible for DevOps', 'Servers for hackers']
            },

            { // 2
                name: 'Barry',
                books: ['Working effectively with unit tests', '50 quick ideas for your tests']
            },

            {  // 3
                name: 'Jessica',
                books: ['Understanding the 4 rules of simple design', 'Principles of package design']},

            {   // 4
                name: 'Clark',
                books: ['Selling test driven projects']
            }
        ];

        var $friendSelect = $('#friend');
        var options;
        var names = [];

        friends.forEach(function (friend, i) {
            var i = i + 1;
            names.push('<option value="' + 1 + '">' + friend.name + '</option>');
        });

            var joinedNames = names.join(" ");
            $friendSelect.html(joinedNames);
            console.log(joinedNames);


        // replacing jQuery
        var friendSelect = document.getElementById("friend");
        var options = "";

        friends.forEach(function(friend, i) {
            options = options + '<option value="' + 1 + '">' + friend.name + '</option>';
        });

        friendSelect.innerHTML = options;

    </script>

</body>

<!--<select id="friend" name="friend">-->
    <!--<option value="1">Oliver</option>-->
    <!--<option value="2">Barry</option>-->
    <!--<option value="3">Jessica</option>-->
    <!--<option value="4">Clark</option>-->
<!--</select>-->


</html>