Need assistance on ajax request

Question

this is my first time working with $.ajax requests, I am currently building a employee directory that should get 12 random people like this:

I created the 12 gallery cards dynamically, $gallery Markup represents each card

var $galleryMarkUp = $('<div class="card"> </div>');
  var $cardIMGContainer = $('<div class="card-img-container"> </div>');
  var $cardInfoContainer = $('<div class="card-info-container"> </div>');

  //Append $cardIMGContainer and $cardInfoContainer inside $galleryMarkUp
  $galleryMarkUp.append($cardIMGContainer, $cardInfoContainer);

  //I append an img src inside $cardIMGContainer
  $cardIMGContainer.prepend('<img class="card-img" src="https://placehold.it/90x90" alt="profile picture">');

  //I also need to append an h3 and a couple of paragraphs inside $cardInfoContainer
  $cardInfoContainer.prepend('<h3 id="name" class="card-name cap">first last</h3>',
  '<p class="card-text">email</p>', '<p class="card-text cap">city, state</p>');

//Append $galleryMarkUp inside <div id="gallery" class="gallery">
 $('#gallery').append($galleryMarkUp);

/*I used a loop to clone them 12 times */

for (let index = 0; index <11; index++) {
   $galleryMarkUp.clone().insertAfter($galleryMarkUp)

below is my ajax request I made to url: 'https://randomuser.me/api/?nat=us&results=12&'

$.ajax({
url: 'https://randomuser.me/api/?nat=us&results=12&',
dataType: 'json',
success: function(data) {
  console.log(data); //this should log the data for 12 employees in JSON format

  var employeeInfo = data.results //creating a reference to data.results

  $.each(employeeInfo, function(index, employee) {
    //create variable references for Name, email, city,state, etc
    var name = employee.name.first + " " + employee.name.last;
    var email = employee.email;
    var picture = employee.picture.large;
    var location = employee.location.city;
    var number = employee.phone;
    var fullStreet = employee.location.street + " " + location + " " + employee.location.postcode;
    var birthday =  employee.dob.date;

    //SHOW CONTENT FOR SMALL GALLERY CARDS

    //attach images to employee gallery 
    $('.card-img').attr('src', picture);

    //Get to display the name, I used a code snippet from https://stackoverflow.com/a/11468183/10043628 by user jagm
    $('.card-info-container > :first-child').text(name);

    //Get to display email
    $('.card-text').text(email);

    //Get to display city and state 
    $('.card-info-container > :nth-child(3)').text(location);



    //SHOW CONTENT FOR MODAL BOXES

    //display name
    $('.modal > :nth-child(2)').text(name);

    //attach images to employee modals
    $('.modal-img').attr('src', picture);

    //Display email
   $('.modal > :nth-child(3)').text(email);

   //Display city
    $('.modal > :nth-child(4)').text(location);

    //Display number
    $('.modal > :nth-child(6)').text(number);

    //Display address
    $('.modal > :nth-child(7)').text(fullStreet);

    //Display Birthday
    $('.modal > :nth-child(8)').text(birthday);  
  }); 
} 
}); 

so my question is, how do I add more employee cards without copying every single detail? I am currently able to get this:

also for reference, this is the repo of my project https://github.com/SpaceXar20/FSJS-techdegree-project-5, I have my ajax request on line 119 of app.js, could someone please help?

Answer 1

Hello Try below script

Demo Links: https://output.jsbin.com/wijaniwaxo

You can check view source of above demo

$(document).ready(function ()
        {
            var html;
            $.ajax({
                method: 'get',
                dataType: 'json',
                url: "https://randomuser.me/api/?nat=us&results=12",
                beforeSend: function ()
                {
                    $('.gallery').html('<h1 class="text-center">Please wait content loading...</h1>');
                },
                success: function (response)
                {
                    html = '';
                    if (response.results)
                    {
                        $.each(response.results, function (index, value)
                        {
                            html += '<div class="col-md-4 custom-col">';
                            html += '<img src="' + value.picture.medium + '" alt="Image ' + index + '" style="width: 100px;" />';
                            html += '<p>' + value.name.first + ' ' + value.name.last + '</p>';
                            html += '<p>' + value.email + '</p>';
                            html += '<p>' + value.location.city + '</p>';
                            html += '</div>';
                        });

                        $('.gallery').html(html);
                    }
                },
                complete: function (response){}
            });
        });

Answer 2

You can append your card template like this:

$.ajax({
    url: 'https://randomuser.me/api/?nat=us&results=12&',
    dataType: 'json',
    success: function (data) {
        console.log(data); //this should log the data for 12 employees in JSON format

        var employeeInfo = data.results //creating a reference to data.results
        var _cardTemplate = '';
        $.each(employeeInfo, function (index, employee) {
            //create variable references for Name, email, city,state, etc
            var name = employee.name.first + " " + employee.name.last;
            var email = employee.email;
            var picture = employee.picture.large;
            var location = employee.location.city;
            var number = employee.phone;
            var fullStreet = employee.location.street + " " + location + " " + employee.location.postcode;
            var birthday = employee.dob.date;

            //SHOW CONTENT FOR SMALL GALLERY CARDS


            _cardTemplate += '<div class="card">';
            _cardTemplate += '<div class="card-img-container">';
            _cardTemplate += '<img class="card-img" src= "' + picture + '" alt="profile picture"></div>';
            _cardTemplate += '<div class="card-info-container"><h3 id="name" class="card-name cap">' + name + '</h3>';
            _cardTemplate += '<p class="card-text">' + email + '</p><p class="card-text cap">' + location + '</p>';
            _cardTemplate += '</div></div>';

            //SHOW CONTENT FOR MODAL BOXES

            //display name
            $('.modal > :nth-child(2)').text(name);

            //attach images to employee modals
            $('.modal-img').attr('src', picture);

            //Display email
            $('.modal > :nth-child(3)').text(email);

            //Display city
            $('.modal > :nth-child(4)').text(location);

            //Display number
            $('.modal > :nth-child(6)').text(number);

            //Display address
            $('.modal > :nth-child(7)').text(fullStreet);

            //Display Birthday
            $('.modal > :nth-child(8)').text(birthday);



        });

        $('#gallery').append(_cardTemplate); //Append Finally all cards with employee details
    }

})