CODEWITHSUNDEEP
javascriptarraysjsonvuejs2
Janaka Dombawela
Janaka Dombawela

Reputation: 1357

Append JSON objects to same object

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?

Upvotes: 1

Views: 88

Answers (3)

Roh&#236;t J&#237;ndal
Roh&#236;t J&#237;ndal

Reputation: 27192

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

Upvotes: 0

Ori Drori
Ori Drori

Reputation: 191916

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

Upvotes: 3

Nothing Mi
Nothing Mi

Reputation: 332

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.

Upvotes: 2

Related Questions