Appending Font Awesome to table in Javascript

1.3k Views Asked by At

I've inherited some code however I am not very familiar with how it is working. It currently gets usernames and appends them to their respective table. I am trying to add font awesome icons next to the usernames but I am not sure I am implementing it correctly.

Code:

$.when(instagram, twitter)
  .done(function (igResponse, tResponse) {
    tbl_instagram.empty();
    tbl_twitter.empty();
    if (igResponse[0].length === 0){
      tbl_instagram.append($('<tr>').append($('<td>').html('No Users Found')))
    }
    if (tResponse[0].length === 0) {
      tbl_twitter.append($('<tr>').append($('<td>').html('No Users Found')))
    }

    $.each(tResponse[0], function(i, twt_name){
      tbl_twitter.append(
        $('<tr>').append(
          $('<td>').append(
            $('<a>', 
              {"href" : createTwHyperlink(twt_name), 
               "text": twt_name}).addClass('link'))))})

      $.each(igResponse[0], function(i, ig_name){
        tbl_instagram.append(
          $('<tr>').append(
            $('<td>').append(
              $('<a>', 
                {"href" : createIgHyperlink(ig_name), 
                 "text": ig_name}).addClass('link'))))});
  })
  .fail(function () {
    console.log("Fail");
  });

function  createIgHyperlink(username) {
  return linkInstagram + username;
}
function createTwHyperlink(username) {
  return linkTwitter + username;
}

I have tried modifying the code to look append but it does not seem to be working.

Samples of things I have tried:

1)

    $.each(tResponse[0], function(i, twt_name){
      tbl_twitter.append(
        $('<tr>').append(
          $('<td>').append(
            $('<a><i class="fa fa-twitter">', 
              {"href" : createTwHyperlink(twt_name), 
               "text": twt_name}).addClass('link'))))})

2)

    $.each(tResponse[0], function(i, twt_name){
      tbl_twitter.append(
        $('<tr>').append(
          $('<td>').append(
           $('<i>'
            {"class": fa fa-twitter}).append(
            $('<a>', 
              {"href" : createTwHyperlink(twt_name), 
               "text": twt_name}).addClass('link')))))})

3)

    $.each(tResponse[0], function(i, twt_name){
      tbl_twitter.append(
        $('<tr>').append(
          $('<td>').append(
            $('<a>', 
              {"href" : createTwHyperlink(twt_name), 
               "text": twt_name + " " + "<i class=\"fa fa-twitter\"></i>"}).addClass('link')))))})
1

There are 1 best solutions below

3
On BEST ANSWER

Seems like you're on the right track, you're just missing some quotes and commas, it's easier if you indent it a little different

$.each(tResponse[0], function(i, twt_name){

    tbl_twitter.append(
        $('<tr />').append(
            $('<td />').append(
                $('<a />', {
                    href    : createTwHyperlink(twt_name), 
                    text    : twt_name,
                    'class' : 'link'
                }).prepend( // or append to add the icons after the username
                    $('<i />', {
                        'class': 'fa fa-twitter'
                    })
                )
            )
        )
    );

});