Need assistance on ajax request

54
December 25, 2018, at 02:50 AM

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

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
    }
})
Answer 2

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){}
            });
        });
READ ALSO
WebRTC simple datachannel example?

WebRTC simple datachannel example?

I am very interested by the webrtc technologyI found some great example for video sharing like this one, made very simple and easy to understand

43
How to create a passwordResetLink using the Firebase admin API?

How to create a passwordResetLink using the Firebase admin API?

I'm trying customize the user experience in my firebase project and hence as well need to create custom email templates including the necessary action links

23