Массивы объектов, javascript. - JSON

Question

это не мой родной язык, и я новичок в StackOverflow. Поэтому извините, если я написал что-то неправильно или нарушил какое-то правило форума с самого начала. Я просто хочу знать, могу ли я упростить это, используя классы, избегая идентификаторов из некоторых тегов, или автоматически сгенерировать объект 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

спасибо всем за ваши ответы! Это сработало. Это выход, который я искал. Такс!

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

Answer 2

Я сделал решение с JS Классами и без всех CSS классов или Id, результирующие данные таковы:

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

Здесь вы можете увидеть решение в codesanbox

Answer 3

Одна вещь, которую вы могли бы сделать, чтобы избежать такого большого количества document.getElementById s, это использовать document.querySelectorAll вместо этого, который бы возвратил массив HTML узлов. Это вернет все совпадающие узлы, и вы можете перебрать их, чтобы получить значения. В HTML, которым вы поделились, document.querySelectorAll('#formulario1 input') даст вам все входные данные, но я бы рекомендовал вам использовать атрибуты name на входах HTML, чтобы вы имели некоторое представление о том, что представляют собой значения.

Дополнительная информация: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

Кроме того, как уже указывали многие проницательные комментаторы, вы хотите проверить значение этих узлов DOM внутри the boton.addEventListener обратный звонок. Как написано, эти значения никогда не изменятся.

Answer 4

Добро пожаловать в StackOverflow, лучшее сообщество в мире!

Я понимаю, что вы новичок в JS, и это именно то, чем я был, когда начинал как веб-разработчик. Ваш сценарий может быть реорганизован наверняка путем создания функции для инициализированного элемента, а не для создания каждого отдельного элемента. Вы можете просто использовать для l oop, чтобы сделать это. Пожалуйста, посмотрите мой быстрый рефакторинговый код

<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 5

Вы можете перечислить все доступные флажки в элементе формы. Пример ниже:

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