javascript - Javascript 从动态输入值生成和打印 JSON

Question

我想在不使用 Jquery 的情况下使用纯 Javascript 来执行此操作。我发现的所有示例都使用 JQuery。

我有一个 html 页面 (index.html) ，

<form id="1">
 <input type="text">10</input>
 <input type="text">20</input>
</form>

<form id="2">
 <input type="text">55</input>
 <input type="text">66</input>
</form>

我想像这样在另一个页面（data.json）中打印它，

[
    {
        "1": [
            "10",
            "20"
        ],
        "2": [
            "55",
            "66"
        ]
    }
]

在一个单独的文件（makejson.js）中，我有一个 JQuery 语法，我想将其更改为纯 Javascript，

function makeJSON() {
jsonObj = [];
$("input[type=text]").each(function() {

    var inData = $(this).val();

    item = {}
    item ["1"] = inData;

    jsonObj.push(item);
  });
}

这目前不起作用，它仅适用于来自“1”参数的数组（表单 id 1）。我需要能够动态循环的东西（即 "i = 0; i < array.length; i++" ），它确定来自表单 id 1 的数组 1 和来自表单 id 2 的数组 2。

如何收集输入，将它们转换为 JSON 并将它们保存到单独的页面？

Answer 1

纯Javascript解决方案：

jsFiddle 演示

function makeJSON(){
    var arr = [{}];
    var inputs;
    var jsonString;

    var forms = document.forms;
    for(var i=0; i<forms.length; i++){

        if(typeof(arr[0][forms[i].id]) == 'undefined'){
          arr[0][forms[i].id] = [];
        }

        for(var ii=0; ii<forms[i].elements.length; ii++){
          arr[0][forms[i].id].push(forms[i].elements[ii].value)
        }

    }

    jsonString = JSON.stringify(arr);
    console.log(jsonString);
}

输出一个 JSON 字符串：

[
    {
        "1": [
            "10",
            "20"
        ],
        "2": [
            "55",
            "66"
        ]
    }
]