Append JSON objects to same object

Question

I get form elements from VueJS function call in a HTML form. I create a JSON like:

var elements = event.target.elements;
var form_elements = [];
for (var i = 0; i < elements.length; i++) {
    var element = {};
    element[elements[i].getAttribute('name')] = elements[i].value;
    form_elements.push(element);
}
form_elements = JSON.stringify(form_elements);

I get the JSON as follows:

var form_elements = [{'name':'John'},{'age':'20'},{'gender':'Male'},];

I want to convert this into:

var form_elements = {'name':'John','age':'20','gender':'Male'};

for ajax call. How to do this?

I added answer with minimal code, hope it will work as per your expectation. Thanks — Rohìt Jíndal
– Rohìt Jíndal, Commented Apr 6, 2018 at 5:54

Ori Drori · Accepted Answer · 2018-04-05 11:31:13Z

3

Use Array.reduce() to combine the elements to a single object:

var elements = event.target.elements;

var form_elements = elements.reduce(function(r, el) {
  r[el.getAttribute('name')] = el.value;

  return r;
}, {});

edited Apr 5, 2018 at 11:31

answered Apr 5, 2018 at 11:22

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

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

Comments

Nothing Mi · Accepted Answer · 2018-04-05 11:26:27Z

2

a temporary variable in for block is useless in your case, the final code maybe looks like this:

var elements = event.target.elements;
var form_elements = {};
for (var i = 0; i < elements.length; i++) {
    form_elements[elements[i].getAttribute('name')] = elements[i].value;
}

and the form_elements is what you need finally, try to JSON.stringify it.

answered Apr 5, 2018 at 11:26

Nothing Mi

3321 silver badge8 bronze badges

Comments

Rohìt Jíndal · Accepted Answer · 2018-04-06 05:53:32Z

0

Try this :

var form_elements = [{'name':'John'},{'age':'20'},{'gender':'Male'}];

var obj = {};

for (var i in form_elements) {
  obj[Object.keys(form_elements[i])[0]] = form_elements[i][Object.keys(form_elements[i])[0]]; 
}

console.log(obj); // {name: "John", age: "20", gender: "Male"}

answered Apr 6, 2018 at 5:53

Rohìt Jíndal

27.4k16 gold badges80 silver badges133 bronze badges

Collectives™ on Stack Overflow

Append JSON objects to same object

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related