Add array to Object

Question

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 of these inputs to create an object with keys exactly the same as names in my inputs and add those values as values. So my steps are:

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 the expected 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'
  }
]

Aside: you can't have elements with the same ids. Ids must be unique (just one per page). — Andy
– Andy, Commented Apr 19, 2022 at 21:49

Unmitigated · Accepted Answer · 2022-04-19 22:34:42Z

1

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

edited Apr 19, 2022 at 22:34

answered Apr 19, 2022 at 21:46

Unmitigated

91.4k12 gold badges102 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Stanislav Shokarev Over a year ago

Really close to want I need. Two objects should look like this res = [{ 'item': 'Name', 'unit_price': '100', 'qty': '2', 'discount':'0' }, { 'item': 'Name 2', 'unit_price': '200', 'qty': '5', 'discount':'10' }]

Unmitigated Over a year ago

@StanislavShokarev I've updated my answer.

Alejandro Barone · Accepted Answer · 2022-04-19 21:51:48Z

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

Joe Lissner · Accepted Answer · 2022-04-19 21:53:51Z

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

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

<input class="item2" type="text" name="item" id="item2" value="Name 2">  
<input class="item2" type="number" name="unit_price" id="unit_price2" value="200">
<input class="item2" type="number" name="qty" id="qty2" value="5">
<input class="item2" 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);

Collectives™ on Stack Overflow

Add array to Object

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related