Как создать массив объектов?

Question

[fgehte]

Как по такому html коду

<p>
  <input type="text" name="name" value="name1, name2, name3">
  <button type="button">Добавить</button>
</p>
<p>
  <input type="text" name="price" value="10$, 15$, 3$">
  <button type="button">Добавить</button>
</p>
<p>
  <input type="text" name="number" value="100, 500, 700">
  <button type="button">Добавить</button>
</p>

При нажатии на каждую кнопку добавить, создается следующий массив объектов (Было бы не плохо, если решение будет более менее для начинающего)

let arr = [
  {
    name: 'name1', 
    price: '10$', 
    number: 100
  },
  {
    name: 'name2', 
    price: '15$', 
    number: 500
  },
  {
    name: 'name3', 
    price: '3$', 
    number: 700
  }
];

Answer 1

[0xD34F]

const
  [  name,   price,   number ] =
  [ 'name', 'price', 'number' ]
    .map(n => document.querySelector(`input[name="${n}"]`).value.split(', '));

const arr = name.map((n, i) => ({
  name: n,
  price: price[i],
  number: +number[i],
}));

Comments

[Дмитрий Дерепко]

Извините конечно, но к чему такие синтаксические выеба?
Человек запустит у себя, увидит, что работает. Начнет модифицировать, и все - пиши пропало.

Написали бы в человеческом виде, он был бы вам благодарен в 100 раз больше.

[origami1024]

Синтаксические выеба это как артефакт в фильме Космическая Одиссея 2001.
Человек запустит у себя, потом побежит в соседнюю комнату и у брата запустит, потом они вместе в соседний двор побегут запустят. И т. д., не буду спойлеры по фильму кидать.

[0xD34F]

Дмитрий Дерепко,

Начнет модифицировать, и все - пиши пропало.

Если так - пусть учится программировать. Или можно на фриланс пойти.

Написали бы в человеческом виде

[ издевательски хохочет ]

Получите и распишитесь:

const arr = [
  { name:   'name' },
  { name:  'price' },
  { name: 'number', getter: Number },
].reduce((acc, { name, getter }) => (
  document.querySelector(`input[name="${name}"]`)
    .value
    .split(', ')
    .forEach((n, i) => (acc[i] = acc[i] || {})[name] = getter ? getter(n) : n),
  acc
), []);

[Дмитрий Дерепко]

0xD34F, обфусцировать забыли

[Сергей c0re]

0xD34F, xD )))
человеческий - имелся ввиду циклы )

[Егор Живагин]

Сергей, так тут foreach в reduce, одни циклы вообще)

[Сергей c0re]

Егор Живагин, это итератор(ы), а циклы, это - do while, until loop, for :)