CodeStudio: JavaScript: AJAX Fetch HTML Page (Google Sheet), Display As Collapsible List

Saturday, October 02, 2021

JavaScript: AJAX Fetch HTML Page (Google Sheet), Display As Collapsible List

Library used: 1) jQuery

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<style>
  .collapsibleHeader {
    background-color: lightgrey;
    color: black;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px
  }

.active,
  .collapsibleHeader:hover {
    background-color: lightgrey
  }

.collapsibleContent {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    background-color: #f1f1f1
  }
</style>

<div id="dynamicNestedList">
</div>

<script>
  function createNestedList(gurl) {
    $.ajax({
      type: "GET",
      url: gurl,
      success: function(result) {
        var data = result;
        var outputHtml = "";
        var docTitle = ($(data).find("#doc-title").text());
        var row = ($(data).find("tbody").children());
        outputHtml += '<p><a href=' + gurl + ' target="_blank">' + docTitle + '</a></p>';
        outputHtml += '<div id="divCollapsible"><ol>';
        for (r = 0; r < row.length; r++) {
          var col = row.eq(r).find("td");
          if (col.eq(0).text() === "" || col.eq(0).text() === "title") {
            continue;
          } else {
            outputHtml += '<li  class="collapsibleHeader"><b>' + col.eq(0).text() + '</b><br/>';
            outputHtml += '<small>' + col.eq(1).text() + "|" + col.eq(2).text() + '<br/>';
            outputHtml += '<em>Keywords:' + col.eq(3).text() + '</em></small>';
            outputHtml += '</li></li>';
            outputHtml += '<div class="collapsibleContent"><ul>';
            for (c = 4; c < col.length; c++) {
              if (col.eq(c).text() === "") {
                continue;
              }
              if (col.eq(c).text().substring(0, 8) === "https://") {
                outputHtml += "<li><a href=" + col.eq(c).text() + ">";
                outputHtml += col.eq(c).text();
                outputHtml += "</a></li>"
              } else {
                outputHtml += "<li>" + col.eq(c).html() + "</li>";
              }
            }
            outputHtml += '</ul></div>';
          }
        };
        console.log("outputHtml:", outputHtml);
        $("#dynamicNestedList").append(outputHtml);
        $(".collapsibleHeader").click(function() {
          this.classList.toggle("active");
          var content = this.nextElementSibling;
          if (content.style.display === "block") {
            content.style.display = "none";
          } else {
            content.style.display = "block";
          }
        });
      }
    });
  }
  $(document).ready(function() {
    var gurl = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vS5dGD3GBffPxTu3z3d3cCZHEMnZPNSw1-l0z-yhwmrwwPIY-iCtEV3rMfWnPzBG5OkVw40l8O5lK9Z/pubhtml?gid=0&single=true';
    createNestedList(gurl);
  });
</script>

No comments:

Subscribe to: Post Comments (Atom)