【问题标题】：Pass JSON to JQuery function Javascript将 JSON 传递给 JQuery 函数 Javascript
【发布时间】：2015-12-04 17:33:31
【问题描述】：

我们有一个非常简单的 Google Apps Script Web App，其目的是在 HTML 下拉列表中显示 JSON 数据。 JSON 文件存在于 Google Drive 中。灵感代码来自：http://jsfiddle.net/manoj_admlab/Mta5b/3/

但是当我们尝试“获取 Json”时，没有数据加载到下拉列表中：

index.html

<!DOCTYPE html>
    <html>
    <br> <br>
    <center>
    <head>
    <base target="_top">
    </head>
    <body>


    <select id="destinations">
    <option value="">Select</option>
    </select>
    <a href="#" id="fetch">Fetch JSON</a>
    </center>


    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script>
    <script>
    google.script.run.getJson(); // Runs the function "getJson();" in Code.gs

    $('#fetch').click(function(s) {

        $.post(s, {json: JSON.stringify(json)}, function(data) {
            $.each(data.Destinations, function(i, v) {
                $('#destinations').append('<option value="' + v.destinationID + '">' + v.destinationName + '</option>');
            });
        });
    });

    </script>
    </body>
    </html>

代码.gs

function doGet() {
      var template = HtmlService.createTemplateFromFile('index');

      var htmlOutput = template.evaluate()
                       .setSandboxMode(HtmlService.SandboxMode.NATIVE);

      return htmlOutput;
    }

    function getJson() {

    var files = DriveApp.getFilesByName("jsonData.json");
      var file = files.next();
      var JSONDATA = file.getAs("application/json").getDataAsString();
      //JSONDATA = JSON.stringify(JSONDATA);
      JSONDATA = JSON.parse(JSONDATA);
      Logger.log(JSONDATA);

    click(JSONDATA); // <-- Trying to pass this data to "$('#fetch').click(function(s) {"
    }

jsonData.json

{
        "options": {    
           "Destinations": [
        {
            "destinationName": "London",
            "destinationID": "lon"
        },
        {
            "destinationName": "New York",
            "destinationID": "nyc"
        },
        {
            "destinationName": "Paris",
            "destinationID": "par"
        },
        {
            "destinationName": "Rome",
            "destinationID": "rom"
        }
        ]
    }
    }

【问题讨论】：

标签： javascript jquery html json google-apps-script

【解决方案1】：

你必须在getJson()函数中返回数据，并且在调用它的时候需要传递一个回调，用withSuccessHandler()，比如：

在 HTML 中：

function justLog(e){
   console.log(e);
}

$('#fetch').click(function(s) {
   google.script.run.withSuccessHandler(justLog).getJson(); // Runs the function "getJson();" in Code.gs
});

在code.gs中，完成函数：

return JSONDATA;

【讨论】：

Kriggs 你是对的，我需要一个 syccesshandler，我重新编码了我需要的东西。非常感谢。

【解决方案2】：

感谢克里格斯！效果很好：

Index.html：

<!DOCTYPE html>
<html>
  <head>

  <select id="dropDownDest">
</select>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script>

<script>

function onSuccess(json) {

       $.each(json.Cars, function (key, value) {
            $("#dropDownDest").append($('<option></option>').val(value.carID).html(value.CarType));
        });

        $('#dropDownDest').change(function () {
            alert($(this).val());
            //Code to select image based on selected car id
        });

      }

      google.script.run.withSuccessHandler(onSuccess)
          .jsonData();

    </script>

  </head>
</html>

代码.gs：

function doGet() {
  return HtmlService.createHtmlOutputFromFile('Index')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}

    function jsonData() {

     var a = {
                Cars: [{
                    "CarType": "BMW",
                    "carID": "bmw123"
                }, {
                    "CarType": "mercedes",
                    "carID": "merc123"
                }, {
                    "CarType": "volvo",
                    "carID": "vol123r"
                }, {
                    "CarType": "ford",
                    "carID": "ford123"
                }]
            }; 

      Logger.log(a);
      return a;

    }

【讨论】：