如何将模态对话框返回的字符串转换为可处理的JSON对象

我需要处理超过50000字符的JSON文件，用Google Sheets的模态对话框做了两个文本区域：第一个粘贴原始JSON，第二个输出处理结果。

测试模式正常运行 #

用以下processText函数可以正常把字符串转大写：

function processText (input){
  let processedText = input.toUpperCase(); 
  //Browser.msgBox(processedText)
  return processedText; 
}

在第一个文本区域输入ddddd，点击处理按钮后第二个区域会输出DDDDD。

正式处理JSON时解析失败 #

换成处理JSON的正式processText函数后，无法把第一个文本区域传递的字符串转成对象：

function processText(input) {
  Browser.msgBox(typeof input)
  let inputJSON = JSON.parse(input);
  Browser.msgBox(typeof inputJSON)
   
   //Filter
  let processedText = inputJSON.filter(item => item.id && item.label && item.options)
                  .map(({ id, label, options }) => 
                         isEmptyObject(options) === false ? ({ id, label, options}):({ id, label}));

 processedText.forEach(i => Object.values(i.options ?? {}).forEach(i => delete i.count));                    

 Browser.msgBox(processedText)
 
 return JSON.stringify(processedText);
}

核心问题 #

HTML里的processAndDisplay函数用了JSON.stringify(inputText)传递参数，这是导致解析失败的原因——文本区域里的内容本身就是JSON字符串，再套一层JSON.stringify会把它转成字符串的字符串，后端JSON.parse的时候自然无法解析成目标对象。

解决方法 #

直接传递文本区域的原始值，不要额外调用JSON.stringify，修改HTML里的processAndDisplay函数：

function processAndDisplay() {
  var inputText = document.getElementById('copyOrig').value;
  // 去掉JSON.stringify，直接传原始字符串
  google.script.run.withSuccessHandler(successHandler).processText(inputText); 
}

另外要确保后端的isEmptyObject函数存在，否则会报错，补充这个辅助函数：

function isEmptyObject(obj) {
  return Object.keys(obj).length === 0 && obj.constructor === Object;
}

完整调整后的HTML代码 #

<button id="copyTOP" style="margin-bottom: 25px;" onclick="copy()">Copy Redurced sumApp JSON</button><input style="width:31%;height:30px;" type="button" value="Close" onClick="google.script.host.close();" />
<!DOCTYPE html>
<html>
  <head>
    <base target="_top" />
        <link
            rel="stylesheet"
            href="https://res.cloudinary.com/greater-then-the-sum/raw/upload/v1699896536/add-ons1a_ruvbar.css"
        />
        <style>
            .container {
                margin: 5px 5px 5px 5px;
            }
        </style>
  </head>
  <body>
    <H4>Raw sumApp JSON Input</H4>
    <textarea id="copyOrig" class="form-control"></textarea>
    <br>
    <H4>Output</H4>
    <textarea id="copyReduced" class="form-control"></textarea>
    <br><br><br>
    <button id="propersize" onclick="processAndDisplay()">Process</button>

  </body>
</html>
<br>
<br>
<button id="copyBottom" style="margin-bottom: 25px;" onclick="copy()">Copy Reduced sumApp JSON</button><input style="width:31%;height:30px;" type="button" value="Close" onClick="google.script.host.close();" />

<script>
  function processAndDisplay() {
    var inputText = document.getElementById('copyOrig').value;
    // 移除JSON.stringify，直接传递原始输入
    google.script.run.withSuccessHandler(successHandler).processText(inputText); 
  }

  function successHandler(processedText) {
    document.getElementById('copyReduced').value = processedText; 
  } 
</script>


<script type="text/javascript">
 function copy() {
  let textarea = document.getElementById("copyReduced");
  textarea.select();
  document.execCommand("copy");
 }

 function copyBOTTOM() {
  let textarea = document.getElementById("copyNEW");
  textarea.select();
  document.execCommand("copy");
 } 
 </script>

测试用JSON #

[
    {
    "id": "c3c6f410f58e5836431b473ebcf134756232d04f2bf35edff8",
    "component": "checkbox",
    "customFields": [

    ],
    "index": 0,
    "label": "Sector2",
    "options": {
      "62f92fab79ac81d933765bd0bbc4a1f5ea26cb3a088bcb4e6e": {
        "index": 0,
        "value": "Bob",
        "label": "Bob",
        "count": 1
      },
      "2fe91aa3567c0d04c521dcd2fc7e40d7622bb8c3f594d503da": {
        "index": 1,
        "value": "Student",
        "label": "Student",
        "count": 1
      },
      "c59ea1159f33b91a7f6edc6925be5e373fc543e4": {
        "index": 2,
        "value": "BBB",
        "label": "BBB",
        "count": 1
      },
      "c59ea1159f33b91a7f6edc6925be5e373fc54AAA": {
        "index": 3,
        "value": "Orange Duck",
        "label": "Orange Duck",
        "count": 1
      }
    },
    "required": false,
    "validation": "/.*/",
    "imported": false
  },
  {
    "id": "f794c6a52e793ee6f5c42cd5df6b4435236e3495e951709485",
    "component": "textInput",
    "customFields": [

    ],
    "index": 1,
    "label": "Brown Cow",
    "options": {
    },
    "required": false,
    "validation": "/.*/",
    "imported": false
  },
  {
    "id": "f794c6a52e793ee6f5c42cd5df6b4435236e3495e95170ZZZ",
    "component": "textInput",
    "customFields": [

    ],
    "index": 1,
    "label": "Red Fish",
    "options": {
    },
    "required": false,
    "validation": "/.*/",
    "imported": false
  }
 ];

内容的提问来源于stack exchange，提问作者Einarr