如何在 html 文件执行前更改 application/json 脚本？

Question

我有一个 html 文件，里面有一个 <script type="application/json"></script>。我需要在加载 html 文件之前更改此脚本中的 json 对象。我该怎么做呢？ json 对象看起来类似于：

    <script type="application/json">
        {      
            "questionOptions": {
                "ques_1": {"type" : "YesNoQuestion","questionText": "messages.questions.1"},
                "ques_2": {"type" : "YesNoQuestion","questionText": "messages.questions.2"},
                "ques_3": {"type" : "YesNoQuestion","questionText": "messages.questions.3"},
                "ques_4": {"type" : "YesNoQuestion","questionText": "messages.questions.4"},
                "ques_5": {"type" : "YesNoQuestion","questionText": "messages.questions.5"}
            },
            "questions": [
                "ques_1",
                "ques_2",
                "ques_3",
                "ques_4",
                "ques_5"
           ],
           "persist": false,
           "intl": {
               "locales": "en-US",
               "messages": {
                   "questions": {
                       "1": "<img src='../images/img1.jpg'>",
                       "2": "<img src='../images/img2.jpg'>",
                       "3": "<img src='../images/img3.jpg'>",
                       "4": "<img src='../images/img4.jpg'>",
                       "5": "<img src='../images/img5.jpg'>"
                   },
                   "yes": "Similar",
                   "no": "Old",
                   "dragAndDrop": "<br><span class='preq'>Is the object old or similar?</span><br>Starting dragging the button down to see the picture. Drag and drop to your answer.",
                   "continue": "Click Next to continue",
                   "next": "Next",
                   "back": "Back",
                   "finish": "Finish",
                   "thankYou": "Thank you for completing this form."
                }
            }
         }
    </script>

我需要随机化 questionOptions、questions 和 intl[messages][questions]，但随机化它们的方式与它们在给定数组中按索引相互匹配时的方式相同。

非常感谢您的帮助。

编辑：添加了匹配引号。

Answer 1

这里有几点想法：

在 html 文件加载之前 并没有真正随机化事物的方法，除非您可以控制生成 JSON 首先，我猜它是硬编码的，如图所示。

questionOptions 和 messages 是散列。它们的键顺序无关紧要，所以我看不出随机化键的插入和布局有什么意义。

最后，questions 是一个数组——这可能是您唯一想要随机化的东西（并且希望在 UI 上基于这个数组顺序？）

这是您可以添加到数组原型中的一小段代码：

Array.prototype.shuffle = function() { var j, x, i; for (i = this.length; i; i--) { j = Math.floor(Math.random() * i); x = this[i - 1]; this[i - 1] = this[j]; this[j] = x; } return this; }

然后您可以在任何要随机化的数组上调用它，例如：

qdata.questions.shuffle(); //assuming you store that JSON in a variable called qdata

Answer 2

如何将 JSON 脚本块转换为实时数据并在文档加载前修改原始 JSON 的小示例：

<script type="application/json">{"foo":"bar"}
</script>
<script>
function randomizeData(data) { return { foo: "something else" }; }
var data;
(function() {
  var scripts = document.getElementsByTagName("script");
  for(var i = 0; i < scripts.length; i++) {
    if (scripts[i].type === "application/json") {
      data = JSON.parse(scripts[i].innerText);
      // manipulate/randomize your data here
      data = randomizeData(data);
      // change the JSON source to whatever you like
      scripts[i].innerText = JSON.stringify(data);
      break;
    }
  }
})();

document.write("The value of foo: "+data.foo);
</script>
<body>
</body>

如何在 html 文件执行前更改 application/json 脚本？

How can I alter an application/json script within an html file before it executes?

html

javascript

arrays

json

shuffle