How can I create a variable, from repetitive strhtml, then call it throughout the javascript file?

List item

I am trying to clean up my code and I am wondering how should I go on about doing it.

I have a var = strhtml by which I keep appending a data array on it and do a ().html() to replace it in AJAX.

I am however unable to figure out the correct syntax to do this. Here are my lines of codes:

var strhtml = "";
var row = response.data;
for (var i = 0; i < response.data.length; i++) {
  strhtml += ` <div class="list-group-item list-group-item-action user-learning-playlist-container">
      <div class="d-flex w-100 justify-content-between">
        <div class="title">
          <h6 class="mt-2">${row[i].title}</h6>
        </div>`;
  if (row[i].ispresent == 1) {
    var actionbutton = ` 
          <button type="button" class="btn btn-secondary" id="btn-remove-course-from-playlist" data-course-id="${row[i].courseid}" data-playlist-id="${row[i].playlistid}" data-playlist-detail-id="${row[i].playlistdetailid}">
           <h6 class="m-0">Remove</h6>
          </button>`;
  } else {
    var actionbutton = `
          <button type="button" class="btn btn-secondary" id="btn-add-course-to-playlist" data-course-id="${activecourseid}" data-playlist-id="${row[i].id}">
           <h6 class="m-0">
             <i class="icon fa fa-plus"></i>Add
           </h6>
          </button>`;
  }
  strhtml += `${actionbutton}
      </div>`;
}
$("#playlist-modal").html(strhtml);

I am trying to create a function that returns this and call it different AJAX parts of this JavaScript file.

What I have attempted is this but I can’t figure out how to pass the parameters correctly.

function getPlaylistHtml() {
  var playlisthtml = `var strhtml = '';
                          var row = response.data;
                          for (var i = 0; i < row.length; i++) {
                            strhtml +=  '<div class="list-group-item list-group-item-action user-learning-playlist-container">
                                          <div class="d-flex w-100 justify-content-between">
                                           <div class="title"><h6 class="mt-2">${row[i].title}</h6></div>'

                       if (row[i].ispresent == 1) {
                        var actionbutton = '<div><button type="button" class="btn btn-secondary" id="btn-remove-course-from-playlist" data-course-id="${row[i].courseid}" data-playlist-id="${row[i].playlistid}" data-playlist-detail-id="${row[i].playlistdetailid}"><h6 class="m-0">Remove</h6></button></div>'
                        }  else {
                        var actionbutton = '<div><button type="button" class="btn btn-secondary" id="btn-add-course-to-playlist" data-course-id="${activecourseid}" data-playlist-id="${row[i].id}"><h6 class="m-0"><i class="icon fa fa-plus"></i>Add</h6></button></div>'
                                    };

                            strhtml +=  '${actionbutton}
                                           </div>
                                          </div>'
                                }

                                $('#playlist-modal').html(strhtml);`;

  return playlisthtml;
}

When I call the function playlisthtml() in my AJAX I get an issue where it says my variables such as row etc are not defined.

My fundamentals are quite bad and I’ve spent days on this issue. Any help is greatly appreciated!

Answer

It took me awhile but hopefully this would help anyone who is just starting out as a dev and have weak logic and fundamentals like me. Here is my solution:

function playlistHtml(row){
    var strhtml = '';
    for (var i = 0; i < row.length; i++) {
        strhtml +=  `<div class="list-group-item list-group-item-action user-learning-playlist-container">
                            <div class="d-flex w-100 justify-content-between">
                                <div class="title"><h6 class="mt-2">${row[i].title}</h6></div>`

        if (row[i].ispresent == 1) {
            var actionbutton = `<button type="button" class="btn btn-secondary btn-remove-course-from-playlist" data-course-id="${row[i].courseid}" data-playlist-id="${row[i].playlistid}" data-playlist-detail-id="${row[i].playlistdetailid}"><h6 class="m-0">Remove</h6></button>`
        }  else {
            var actionbutton = `<button type="button" class="btn btn-secondary btn-add-course-to-playlist" data-course-id="${row[i].activecourseid}" data-playlist-id="${row[i].id}"><h6 class="m-0"><i class="icon fa fa-plus"></i>Add</h6></button>`
        };

        strhtml +=              `${actionbutton}
                            </div>
                            <div class="meta hidden">
                                <div class="description">Description = ${row[i].description}</div>
                                <div class="id">ID = ${row[i].id}</div>
                                <div class="playlistid">Playlist ID = ${row[i].playlistid}</div>
                                <div class="userid">User ID = ${row[i].userid}</div>
                                <div class="courseid">Course ID = ${row[i].courseid}</div>
                                <div class="playlistdetailid">Playlist Detail ID = ${row[i].playlistdetailid}</div>
                                <div class="activecourseid">Active Course ID = ${row[i].activecourseid}</div>
                            </div>
                        </div>`
    }

    return(strhtml);
}

I then call it throughout my JavaScript by invoking the function

$('#playlist-modal').html(playlistHtml(response.data));

Advertisement

Answer