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

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 >
      <div >
        <div >
          <h6 >${row[i].title}</h6>
        </div>`;
  if (row[i].ispresent == 1) {
    var actionbutton = ` 
          <button type="button"  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 >Remove</h6>
          </button>`;
  } else {
    var actionbutton = `
          <button type="button"  id="btn-add-course-to-playlist" data-course-id="${activecourseid}" data-playlist-id="${row[i].id}">
           <h6 >
             <i ></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 >
                                          <div >
                                           <div ><h6 >${row[i].title}</h6></div>'

                       if (row[i].ispresent == 1) {
                        var actionbutton = '<div><button type="button"  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 >Remove</h6></button></div>'
                        }  else {
                        var actionbutton = '<div><button type="button"  id="btn-add-course-to-playlist" data-course-id="${activecourseid}" data-playlist-id="${row[i].id}"><h6 ><i ></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!

CodePudding user response：

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 >
                            <div >
                                <div ><h6 >${row[i].title}</h6></div>`

        if (row[i].ispresent == 1) {
            var actionbutton = `<button type="button"  data-course-id="${row[i].courseid}" data-playlist-id="${row[i].playlistid}" data-playlist-detail-id="${row[i].playlistdetailid}"><h6 >Remove</h6></button>`
        }  else {
            var actionbutton = `<button type="button"  data-course-id="${row[i].activecourseid}" data-playlist-id="${row[i].id}"><h6 ><i ></i>Add</h6></button>`
        };

        strhtml  =              `${actionbutton}
                            </div>
                            <div >
                                <div >Description = ${row[i].description}</div>
                                <div >ID = ${row[i].id}</div>
                                <div >Playlist ID = ${row[i].playlistid}</div>
                                <div >User ID = ${row[i].userid}</div>
                                <div >Course ID = ${row[i].courseid}</div>
                                <div >Playlist Detail ID = ${row[i].playlistdetailid}</div>
                                <div >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));