对象数组，javascript。- JSON

Question

我只是想知道是否可以简化此操作，使用类，避免使用某些标签中的 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

document.getElementById为了避免其中出现太多 s，您可以做的一件事是使用 usedocument.querySelectorAll来代替，它将返回一个 HTML 节点数组。这将返回所有匹配的节点，您可以迭代这些节点来获取值。在您共享的 HTML 中，document.querySelectorAll('#formulario1 input')将为您提供所有输入，但我鼓励您使用nameHTML 输入上的属性，以便您了解这些值代表什么。

Answer 2

我知道您是 JS 新手，而这正是我刚开始担任 Web 开发人员时的情况。您的脚本可以通过创建一个函数来初始化元素来重构，而不是创建每个元素。您可以简单地使用 for 循环来做到这一点。请查看我的快速重构代码

<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");

  //Old code

  // 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,

  // }

  // ];

  //=========================

  //refactored version

  var arr = [];

  for (var i = 0; i < 4; i++) {

    arr.push(createElem(i + 1));

  }

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

  //old code   

  // 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);

  // });

  //refactored version

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

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

      console.log(arr[i]);

    }

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

    console.log(arr_json);

  });

 // new function to create Element

  function createElem(index) {

    const elem = {

      check: document.getElementById(i).checked,

      value: document.getElementById(i).value,

    }

    return elem;

  }

</script>

或可运行版本 https://jsfiddle.net/x40whk5d/2/

还有其他一些地方可以改进，但我相信当你以后有了更深入的理解后，你自己就能很容易地找到它。我已经注释掉了您的代码并添加了我的新代码以帮助您获得更好的视图。谢谢，祝你好运！

Answer 3

我用 JS 类做了一个解决方案，没有所有 CSS 类或 Id，结果数据是这样的：

{

  "input0":{"checkbox":true,"input":"23423"},

  "input1":{"checkbox":false,"input":""},

  "input2":{"checkbox":false,"input":""},

  "input3":{"checkbox":false,"input":""}

} 

在这里你可以看到codesanbox中的解决方案

Answer 4

您可以枚举表单元素中所有可用的复选框。请参见下面的示例：

function loopForm(form) {

var arr = [];

for (var i = 0; i < form.elements.length; i++) {

    if (form.elements[i].type == 'checkbox') {

        arr.push({ check: form.elements[i].checked, value: form.elements[i].value });

    }

}

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

document.getElementById("demo").innerHTML = arr_json;

}

Answer 5

有效。这是我正在寻找的输出。谢谢！

const contenedor = document.getElementById('contenedor');

        const elem = contenedor.querySelectorAll('.caja');

        const elem2 = contenedor.querySelectorAll('.cajas');

    document.getElementById('accion').addEventListener('click', function(){

        var i = 0; //variables

        let arr = [];

        for(i; i< elem.length; i++){

            arr.push({texto:elem[i].value, valor: elem2[i].value});

        }

        console.log(JSON.stringify(arr));

    });