将JSON传递给JQuery函数Javascript

Question

我们有一个非常简单的Google Apps脚本网络应用程序，目的是在HTML下拉列表中显示JSON数据。 JSON文件存在于Google云端硬盘中。 灵感代码来自： 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>

代码

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"
        }
        ]
    }
    }

Answer 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;

Answer 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;

    }

将JSON传递给JQuery函数Javascript

问题描述

index.html

代码

jsonData.json

2 个解决方案

解决方案1
2 已采纳 2015-12-04 17:43:37

解决方案2
0 2015-12-07 16:41:26

将JSON传递给JQuery函数Javascript

问题描述

index.html

代码

jsonData.json

2 个解决方案

解决方案1 2 已采纳 2015-12-04 17:43:37

解决方案2 0 2015-12-07 16:41:26

解决方案1
2 已采纳 2015-12-04 17:43:37

解决方案2
0 2015-12-07 16:41:26