Question

I have a javascript function that generates a list of folders in my drive and returns them as an array which i then stringify. I am trying to put those folders in a table when i click a button, problem is am not quite sure how to parse the values being returned from the function in my jquery. Any help will be appreciated, here's my code

Javascript

   function generateFolderTree() {
      Logger.log("generateFolderTree called");
      try {

        var parentFolder = DriveApp.getRootFolder();

        getChildFolders(parentFolder);

      } catch (e) {

        Logger.log(e.toString());

      }

    }


    function getChildFolders(parent) {
    var i =0;

      var childFolders = parent.getFolders();
      var arrayFolder = [];

      while (childFolders.hasNext()) {

        var childFolder = childFolders.next();

       arrayFolder[i] = childFolder.getName();


        i++;

      }
       //Logger.log("Folder Name: " + arrayFolder);
       var p =  JSON.stringify(arrayFolder);
       Logger.log(p);
      return p;

    }



  show.html


 <!-- USe a templated HTML printing scriphlet to import common stylesheet. -->
    <?!= HtmlService.createHtmlOutputFromFile("Stylesheet").getContent(); ?>
    <!-- Use a templated HTML printing scriptlet to import JavaScript. -->

    <div>
    <div class = "block" id = "dialog-elements">
    <button class = "selectFolder" id = "selectFolder" >Select a Folder</button>
    </div>
    <!-- This block is going to be hidden until the user selects a folder -->
    <div class = "block" id = "hiddenAttrib">
    <p><label for = "SelectedFolder"> Selected Folder: </label></p>
    <p><label id = "foldername"> Folder Name: </label></p>
    <p><label id = "folderid"> Folder ID: </label></p>
    </div>
    <div class = "folderTable" id = "folderTable">
    <p><label class = "showStatus" id = "dialog-status">Status: </label></p>
    <table style = "width:100%" id = "source">
    <!--<tr>
       <td> <button>Awesome</button></td>
    </tr>-->


    </table>


    </div>

    </div>
    <!-- Use a templated HTML printing scriptlet to import JavaScript. -->
    <?!= HtmlService.createHtmlOutputFromFile('ShowJavaScript').getContent(); ?>

jquery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
$("button").click(runMyFunction);
});
function runMyFunction(){
google.script.run
.withSuccessHandler(successCallback)
.withFailureHandler(showError)
.generateFolderTree(arrayFolders);
 $("#hiddenAttrib").hide();
 var folders = JSON.parse(arrayFolders);
 console.log(folders);
    var counter = 4;

    var i = 0;
    for (i = 0; i<folders.length; i++){
      console.log("i = " + i);
      var row = $("<p><tr><td><button>" + folders + "</button></td></tr></p>");
      console.log("counter = " + counter);
      $("#source").append(row.html());
}
}

function showError(error) {
    console.log(error);
    window.alert('An error has occurred, please try again.');
  }
</script>

Answer 1

在这种情况下，您不必进行字符串化。您的successCallback函数完全能够从Google脚本函数接收数组。

Answer 2

如果数组数据以字符串形式返回，则需要使用split()方法创建数组。

arrayAsString.split(",");//Split string into an array. Split at comma.

JSON.parse()只需要在对象上使用。此外，您不需要使用JSON.stringify(arrayFolders)。如果要将数组转换为字符串，可以使用join()或toString()。

我没有看到withSuccessHandler()的单独功能。您的代码应该看起来像这样：

<script>
$(function(){
  $("button").click(runMyFunction);
});

function runMyFunction(){
  google.script.run
    .withSuccessHandler(successCallback)
    .withFailureHandler(showError)
    .generateFolderTree(arrayFolders);

  $("#hiddenAttrib").hide();
};

function successCallback(returnedArrayAsString) {
  console.log('returnedArrayAsString: ' + returnedArrayAsString);

  var folders = returnedArrayAsString.split(",");//Convert the array as string back to an array
  //console.log(folders);

  var i = 0,
      row;

  for (i = 0; i<folders.length; i++){
    console.log("i = " + i);

    row = "<p><tr><td><button>" + folders + "</button></td></tr></p>";

    $("#source").append(row.html());
  };
};

function showError(error) {
    console.log(error);
    window.alert('An error has occurred, please try again.');
  }
</script>

Get return value from a function {google apps script}

2 个答案: