Как передать параметр объекта массива с веб-сайта vue в google appscript, чтобы установить значение столбца электронной таблицы Google

Сначала я создаю веб-сайт с помощью vue и передаю параметр своему google appscript.

функция просмотра

    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.info(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 введите здесь описание изображения

Вы можете попробовать JSON.stringify при отправке, а затем проанализировать его при получении, но было бы намного проще отправить его через скрипт Google, запускаемый как объект

Cooper 13.12.2020 17:23
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
1
154
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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"
  }
}

Поскольку индекс конкретной навигации и ее свойства становятся именами параметров, вы можете получить их значения, изменив 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]"]);

В качестве альтернативы, как предлагается в комментариях к вопросу, вы можете указать объект навигации при его отправке:

this.$http.get(appurl, {
          params: {
            settingLink: settingLink,
            albumLink: albumLink,
            stepControl: stepControl,
            nav: JSON.stringify(nav)
          }
        }).then(response => {
          console.info(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);

Другие вопросы по теме

Ссылка не существует с пользовательской функцией - скрипт google
Исключение: невозможно вызвать SpreadsheetApp.getUi() из этого контекста. (строка 2, файл "Код")
Добавьте URI перенаправления к автоматически сгенерированному идентификатору клиента Google OAuth 2.0
Сохранение данных строк электронной таблицы в PDF с использованием шаблона Gdoc с использованием скрипта Google Apps
Объедините два многомерных массива, сопоставив выбранный столбец, и верните новый массив со всеми строками и столбцами
Как разобрать данные API в гугл листы
Изменить значение ячейки в зависимости от цвета фона ячейки в Google Sheets
Блокировка ячейки после ввода данных только один раз с помощью скрипта Google Apps
Скрипт для запуска функции ImportRange по запросу
Сценарии приложений Google: как найти первую пустую ячейку в строке, проверить значение в следующем столбце и установить соответствующие значения