对象数组，javascript。- JSON

Question

这不是我的母语，我是 StackOverflow 的新手。所以如果我一开始就写错了或者违反了一些论坛规则，我很抱歉。我只是想知道我是否可以简化它，使用类，避免来自某些标签的 id，或者从此表单自动生成 JSON 对象。

<div id="formulario1">

    <label class="elemento">#Manzanas<input type="checkbox" id="elem1"><input type="number" id="val1"></label>

    <label class="elemento">#Bananas<input type="checkbox" id="elem2"><input type="number" id="val2"></label>

    <label class="elemento">#Peras<input type="checkbox" id="elem3"><input type="number" id="val3"></label>

    <label class="elemento">#Naranjas<input type="checkbox" id="elem4"><input type="number" id="val4"></label>

</div>

<button id="enviar">enviar</button>

<script>

    const a = document.getElementById("formulario1");

    var arr = [

        elem1 = {

            check: document.getElementById("elem1").checked,

            value: document.getElementById("val1").value,

        },elem2 = {

            check: document.getElementById("elem2").checked,

            value: document.getElementById("val2").value,

        },elem3 = {

            check: document.getElementById("elem3").checked,

            value: document.getElementById("val3").value,

        },elem4 = {

            check: document.getElementById("elem4").checked,

            value: document.getElementById("val4").value,

        }

    ];

    const boton = document.getElementById("enviar");

    boton.addEventListener("click", function(){

        console.log(arr[0]);

        console.log(arr[1]);

        console.log(arr[2]);

        console.log(arr[3]);

        var arr_json = (JSON.stringify(arr));

        console.log(arr_json);

    });

<script>

Answer 1

我用 JS 类做了一个解决方案，没有所有的 CSS 类或 Id，结果数据是这样的：{ &nbsp;&nbsp;"input0":{"checkbox":true,"input":"23423"}, &nbsp;&nbsp;"input1":{"checkbox":false,"input":""}, &nbsp;&nbsp;"input2":{"checkbox":false,"input":""}, &nbsp;&nbsp;"input3":{"checkbox":false,"input":""} &nbsp;&nbsp;}在这里你可以看到codesanbox中的解决方案

Answer 2

我知道您是 JS 的新手，而这正是我刚开始作为 Web 开发人员时的情况。通过创建一个函数来初始化元素而不是创建每个元素，可以肯定地重构您的脚本。您可以简单地使用 for 循环来做到这一点。请查看我的快速重构代码<div id="formulario1">&nbsp; <label class="elemento">#Manzanas<input type="checkbox" id="elem1"><input type="number" id="val1"></label>&nbsp; <label class="elemento">#Bananas<input type="checkbox" id="elem2"><input type="number" id="val2"></label>&nbsp; <label class="elemento">#Peras<input type="checkbox" id="elem3"><input type="number" id="val3"></label>&nbsp; <label class="elemento">#Naranjas<input type="checkbox" id="elem4"><input type="number" id="val4"></label></div><button id="enviar">enviar</button><script>&nbsp; const a = document.getElementById("formulario1");&nbsp; //Old code&nbsp; // var arr = [&nbsp; // elem1 = {&nbsp; // check: document.getElementById("elem1").checked,&nbsp; // value: document.getElementById("val1").value,&nbsp; // },&nbsp; // elem2 = {&nbsp; // check: document.getElementById("elem2").checked,&nbsp; // value: document.getElementById("val2").value,&nbsp; // },&nbsp; // elem3 = {&nbsp; // check: document.getElementById("elem3").checked,&nbsp; // value: document.getElementById("val3").value,&nbsp; // },&nbsp; // elem4 = {&nbsp; // check: document.getElementById("elem4").checked,&nbsp; // value: document.getElementById("val4").value,&nbsp; // }&nbsp; // ];&nbsp; //=========================&nbsp; //refactored version&nbsp; var arr = [];&nbsp; for (var i = 0; i < 4; i++) {&nbsp; &nbsp; arr.push(createElem(i + 1));&nbsp; }&nbsp; const boton = document.getElementById("enviar");&nbsp; //old code&nbsp; &nbsp;&nbsp; // boton.addEventListener("click", function() {&nbsp; // console.log(arr[0]);&nbsp; // console.log(arr[1]);&nbsp; // console.log(arr[2]);&nbsp; // console.log(arr[3]);&nbsp; // var arr_json = (JSON.stringify(arr));&nbsp; // console.log(arr_json);&nbsp; // });&nbsp; //refactored version&nbsp; boton.addEventListener("click", function() {&nbsp; &nbsp; for(var i=0; i<arr.length; i++){&nbsp; &nbsp; &nbsp; console.log(arr[i]);&nbsp; &nbsp; }&nbsp; &nbsp; var arr_json = (JSON.stringify(arr));&nbsp; &nbsp; console.log(arr_json);&nbsp; });&nbsp;// new function to create Element&nbsp; function createElem(index) {&nbsp; &nbsp; const elem = {&nbsp; &nbsp; &nbsp; check: document.getElementById(i).checked,&nbsp; &nbsp; &nbsp; value: document.getElementById(i).value,&nbsp; &nbsp; }&nbsp; &nbsp; return elem;&nbsp; }</script>或https://jsfiddle.net/x40whk5d/2/的可运行版本还有其他可以改进的地方，但我相信当您以后有更深入的了解时，您自己会很容易找到它。我已经注释掉了您的代码并添加了我的新代码以帮助您更好地查看。谢谢，祝你好运！

Answer 3

您可以枚举表单元素中所有可用的复选框。请参阅以下示例：function loopForm(form) {var arr = [];for (var i = 0; i < form.elements.length; i++) {&nbsp; &nbsp; if (form.elements[i].type == 'checkbox') {&nbsp; &nbsp; &nbsp; &nbsp; arr.push({ check: form.elements[i].checked, value: form.elements[i].value });&nbsp; &nbsp; }}var arr_json = (JSON.stringify(arr));document.getElementById("demo").innerHTML = arr_json;}

Answer 4

您可以做的一件事是使用 use 来避免其中出现太多document.getElementByIds&nbsp;document.querySelectorAll，它会返回一个 HTML 节点数组。这将返回所有匹配的节点，您可以遍历这些节点以获取值。在您共享的 HTML 中，document.querySelectorAll('#formulario1 input')会为您提供所有输入，但我鼓励您使用nameHTML 输入上的属性，以便您了解这些值代表什么。更多信息：https ://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll此外，正如许多精明的评论者已经指出的那样，您想在回调中检查这些 DOM 节点的boton.addEventListener值。如所写，这些值永远不会改变。

Answer 5

有效。这是我正在寻找的输出。谢谢！const contenedor = document.getElementById('contenedor');&nbsp; &nbsp; &nbsp; &nbsp; const elem = contenedor.querySelectorAll('.caja');&nbsp; &nbsp; &nbsp; &nbsp; const elem2 = contenedor.querySelectorAll('.cajas');&nbsp; &nbsp; document.getElementById('accion').addEventListener('click', function(){&nbsp; &nbsp; &nbsp; &nbsp; var i = 0; //variables&nbsp; &nbsp; &nbsp; &nbsp; let arr = [];&nbsp; &nbsp; &nbsp; &nbsp; for(i; i< elem.length; i++){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; arr.push({texto:elem[i].value, valor: elem2[i].value});&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; console.log(JSON.stringify(arr));&nbsp; &nbsp; });