Add array to Object-CodePudding

I have a collection of inputs

    <input type="text" name="item" id="item" value="Name">  
    <input type="number" name="unit_price" id="unit_price" value="100">
    <input type="number" name="qty" id="qty" value="2">
    <input type="number" name="discount" id="discount" value="0">

    <input type="text" name="item" id="item" value="Name 2">  
    <input type="number" name="unit_price" id="unit_price" value="200">
    <input type="number" name="qty" id="qty" value="5">
    <input type="number" name="discount" id="discount" value="10">

I'm trying to loop through all this inputs to create an object with keys exact same as names in my inputs and add values as values So my steps here:

    let arr = []
    inputs.forEach((elem) => {
    console.log(elem.value)
    arr.push({
     'item': elem.value, 
     'unit_price': elem.value,
     'qty': elem.value,
     'discount':elem.value
 }); 
})

EDITED my expecting output should look like this

arr = [{     
             'item': 'Name', 
             'unit_price': '100', 
             'qty': '2',
             'discount':'0',
           }, 
           { 
             'item': 'Name 2', 
             'unit_price': '200', 
             'qty': '5', 
             'discount':'10' 
            }
           ]

CodePudding user response：

You can iterate over the input elements in chunks of 4.

let inputs = document.querySelectorAll('input');
let res = [];
let names = ['item', 'unit_price', 'qty', 'discount'];
for (let i = 0; i < inputs.length; i  = names.length)
  res.push(names.reduce((acc, curr, j) => (acc[curr] = inputs[i   j].value, acc), {}));
console.log(res);

<input type="text" name="item" id="item" value="Name">
<input type="number" name="unit_price" id="unit_price" value="100">
<input type="number" name="qty" id="qty" value="2">
<input type="number" name="discount" id="discount" value="0">
<input type="text" name="item" id="item" value="Name 2">
<input type="number" name="unit_price" id="unit_price" value="200">
<input type="number" name="qty" id="qty" value="5">
<input type="number" name="discount" id="discount" value="10">

CodePudding user response：

Well, maybe you can wrap your inputs inside divs, and then find each block of values and map the values into two objects. Like:

  <div id="first">
    <input type="text" name="item" id="item" value="Name">  
    <input type="number" name="unit_price" id="unit_price" value="100">
    <input type="number" name="qty" id="qty" value="2">
    <input type="number" name="discount" id="discount" value="0">
  </div>

  <div id="second">
    <input type="text" name="item" id="item" value="Name 2">  
    <input type="number" name="unit_price" id="unit_price" value="200">
    <input type="number" name="qty" id="qty" value="5">
    <input type="number" name="discount" id="discount" value="10">
  </div>

And in JS

      const first = {}
      const second = {}
      document.querySelectorAll('input').forEach( input => {
        if (input.parentElement.id === 'first') {
          first[input.name] = input.value;
        } else {
          second[input.name] = input.value;
        }
      });
      console.log(first, second);

CodePudding user response：

If you want two separate objects, you can add a class to the inputs to group them like so.

<input  type="text" name="item" id="item" value="Name">  
<input  type="number" name="unit_price" id="unit_price" value="100">
<input  type="number" name="qty" id="qty" value="2">
<input  type="number" name="discount" id="discount" value="0">

<input  type="text" name="item" id="item2" value="Name 2">  
<input  type="number" name="unit_price" id="unit_price2" value="200">
<input  type="number" name="qty" id="qty2" value="5">
<input  type="number" name="discount" id="discount2" value="10">

Then, for the javascript, because you are wanting to turn an array of items into a single object, this is a good candidate to use a reduce!

function aggrigateInputs(className) {
  const elements = document.getElementsByClassName(className)

  return elements.reduce((acc, elem) => {
    acc[elem.name] = elem.value;

    return acc;
  }, {})
}

const item1 = aggrigateInputs('item1');
const item2 = aggrigateInputs('item2');

console.log(item1, item2);