对象数组，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，结果数据是这样的：

{
  "input0":{"checkbox":true,"input":"23423"},
  "input1":{"checkbox":false,"input":""},
  "input2":{"checkbox":false,"input":""},
  "input3":{"checkbox":false,"input":""}
  }

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

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

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

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 4

您可以做的一件事是使用 use 来避免其中出现太多document.getElementByIds 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');

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

    });