如何将数组对象参数从 vue 网站传递给 google appscript 以设置 google 电子表格列值答案

【问题标题】：How to pass array object parameter from vue website to google appscript to set google spreadsheet column value如何将数组对象参数从 vue 网站传递给 google appscript 以设置 google 电子表格列值
【发布时间】：2020-12-13 10:42:37
【问题描述】：

首先我通过 vue 创建一个网站并将参数传递给我的 google appscript

vue函数

    var appurl = "my google appscript url"
    this.$http.get(appurl, {
      params: {
        settingLink: this.settingLink,
        albumLink: this.albumLink,
        stepControl: this.stepControl,
        nav: this.navSetting,
      }
    }).then(response => {
      console.log(response);
    })

然后我将参数发送到 google appscript

我的谷歌应用脚本

  function doGet(e) {
  var params = e.parameter;
  var settingLink = params.settingLink;
  var albumLink = params.albumLink;
  var stepControl = params.stepControl;
  var nav = params.nav;
  var SpreadSheet = SpreadsheetApp.openByUrl(settingLink);
  var SheetName = SpreadSheet.getSheetByName("gameSetting");
  SheetName.getRange("D2").setValue(stepControl);
  SheetName.getRange("E2").setValue(albumLink);
  SheetName.getRange("F2").setValue(nav[0].style);
  SheetName.getRange("G2").setValue(nav[1].style);
  SheetName.getRange("H2").setValue(nav[2].style);
  }

参数 albumLink 和 stepControl 是字符串，所以我成功将其推送到我的电子表格（图 1）

但 nav 是一个数组对象，例如（在 vue 数据中）

nav=[
     {style:"red",content:"test"},
     {style:"blue",content:"test"},
     {style:"green",content:"test"},
    ]

如何让电子表格 F2 为“红色”，G2 为“蓝色”，H2 为“绿色”

图 1 enter image description here

【问题讨论】：

您可以在发送时尝试对其进行 JSON.stringify，然后在接收时对其进行解析，但通过作为对象运行的 Google 脚本发送会容易得多

标签： vue.js google-apps-script

【解决方案1】：

通过检查JSON.stringify(e) 的输出，似乎对象的每个属性都变成了不同的参数，并以如下方式接收：

{
  "queryString": "settingLink=settingLinkTest&albumLink=albumLinkTest&stepControl=stepControlTest&nav%5B0%5D%5Bstyle%5D=red&nav%5B0%5D%5Bcontent%5D=test&nav%5B1%5D%5Bstyle%5D=blue&nav%5B1%5D%5Bcontent%5D=test&nav%5B2%5D%5Bstyle%5D=green&nav%5B2%5D%5Bcontent%5D=test",
  "contextPath": "",
  "parameters": {
    "nav[1][style]": [
      "blue"
    ],
    "nav[1][content]": [
      "test"
    ],
    "albumLink": [
      "albumLinkTest"
    ],
    "nav[2][style]": [
      "green"
    ],
    "settingLink": [
      "settingLinkTest"
    ],
    "nav[2][content]": [
      "test"
    ],
    "nav[0][style]": [
      "red"
    ],
    "stepControl": [
      "stepControlTest"
    ],
    "nav[0][content]": [
      "test"
    ]
  },
  "contentLength": -1,
  "parameter": {
    "nav[2][content]": "test",
    "nav[1][content]": "test",
    "albumLink": "albumLinkTest",
    "settingLink": "settingLinkTest",
    "nav[0][style]": "red",
    "stepControl": "stepControlTest",
    "nav[0][content]": "test",
    "nav[1][style]": "blue",
    "nav[2][style]": "green"
  }
}

由于特定 nav 的索引及其属性成为参数的名称，您可以通过将 doGet() 更改为：

SheetName.getRange("F2").setValue(params["nav[0][style]"]);
SheetName.getRange("G2").setValue(params["nav[1][style]"]);
SheetName.getRange("H2").setValue(params["nav[2][style]"]);

或者，正如问题的 cmets 中所建议的，您可以在发送 nav 对象时对其进行字符串化：

this.$http.get(appurl, {
          params: {
            settingLink: settingLink,
            albumLink: albumLink,
            stepControl: stepControl,
            nav: JSON.stringify(nav)
          }
        }).then(response => {
          console.log(response);
        })

然后在收到它时进行解析以按预期使用：

var nav = JSON.parse(params.nav);
SheetName.getRange("F2").setValue(nav[0].style);
SheetName.getRange("G2").setValue(nav[1].style);
SheetName.getRange("H2").setValue(nav[2].style);

【讨论】：