How to convert form arrays to JSON in Javascript? (array of objects)?

Question

HTML:

<form id="products">
<tbody id="product-list">
  <tr>
    <td><input type="hidden" name="type[]" value="jackets">jackets</td>
    <td><input type="hidden" name="name[]" value="test1">test1</td>
    <td><input type="hidden" name="color[]" value="red">red</td><td>
    <input type="hidden" name="size[]" value="S">S</td>
  </tr>
  <tr>
    <td><input type="hidden" name="type[]" value="jackets">jackets</td>
    <td><input type="hidden" name="name[]" value="test2">test2</td>
    <td><input type="hidden" name="color[]" value="blue">blue</td>
    <td><input type="hidden" name="size[]" value="S">S</td>
  </tr>
</tbody>
</form>

JS:

JSON.stringify($("#products").serializeArray();

Output:

[{"name":"type[]","value":"jackets"},{"name":"name[]","value":"test1"},{"name":"color[]","value":"red"},{"name":"size[]","value":"S"},{"name":"type[]","value":"jackets"},{"name":"name[]","value":"test2"},{"name":"color[]","value":"blue"},{"name":"size[]","value":"S"}]

Desired Output:

An array of objects, so something like this (just a visual)

Object[0].type -> "jackets"
Object[0].name -> "test1"
Object[0].color -> "red"
Object[0].size -> "S"
Object[1].type -> "jackets"
Object[1].name -> "test2"
Object[1].color -> "blue"
Object[1].size -> "S"

Ideally, I'm looking for the solution how to do this, as well as the logic in order to learn.

stackoverflow.com/questions/10356370/… check this link

Nicholas
– Nicholas

2017-03-02 20:07:09 +00:00
Commented Mar 2, 2017 at 20:07 — Nicholas
– Nicholas, Commented Mar 2, 2017 at 20:07

hackerrdave · Accepted Answer · 2017-03-02 20:12:46Z

3

You can use Array.prototype.map() to add a key in each object that corresponds to the value you are looking for:

var arr = [{"name":"type[]","value":"jackets"},{"name":"name[]","value":"test1"},{"name":"color[]","value":"red"},{"name":"size[]","value":"S"},{"name":"type[]","value":"jackets"},{"name":"name[]","value":"test2"},{"name":"color[]","value":"blue"},{"name":"size[]","value":"S"}];

var result = arr.map(function(elem){
  elem[elem.name.replace(/\W/g, '')] = elem.value; //adds key "type" with value "jackets"
  return elem;
});

result[0].jackets //"jackets"

edited Mar 2, 2017 at 20:12

answered Mar 2, 2017 at 20:06

hackerrdave

6,7362 gold badges27 silver badges29 bronze badges

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

5 Comments

Zera42 Over a year ago

Hey where does a come from? It's undefined? Also this is the output:

[{"name":"type[]","value":"jackets","jackets":"jackets"},{"name":"name[]","value":"test1","test1":"test1"},{"name":"color[]","value":"red","red":"red"},{"name":"size[]","value":"S","S":"S"},{"name":"type[]","value":"jackets","jackets":"jackets"},{"name":"name[]","value":"test2","test2":"test2"},{"name":"color[]","value":"blue","blue":"blue"},{"name":"size[]","value":"S","S":"S"}]

hackerrdave Over a year ago

ah sorry! was typo

Nicholas Over a year ago

@sieuPhan a is arr

trincot Over a year ago

This produces an array with 8 elements instead of 2, and each of the 8 objects has either 2 or 3 properties. For instance there is { name: test1, value: test1 } included.

hackerrdave Over a year ago

oh - i hadn't realized that it shouldve only been 2 elements. will update.

trincot · Accepted Answer · 2017-03-02 20:14:02Z

You need to make sure the tbody element is a child of a table element.

Then, here is what you could do:

var arr = $("#product-list tr").get().map(function (tr) {
    return $('input', tr).get().reduce(function (obj, input) {
        obj[input.name.replace(/\[.*\]/,'')] = input.value;
        return obj;
    }, {});
});
console.log(JSON.stringify(arr, null, 2));

.as-console-wrapper { max-height: 100% !important; top: 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="products">
<table>
<tbody id="product-list">
  <tr>
    <td><input type="hidden" name="type[]" value="jackets">jackets</td>
    <td><input type="hidden" name="name[]" value="test1">test1</td>
    <td><input type="hidden" name="color[]" value="red">red</td><td>
    <input type="hidden" name="size[]" value="S">S</td>
  </tr>
  <tr>
    <td><input type="hidden" name="type[]" value="jackets">jackets</td>
    <td><input type="hidden" name="name[]" value="test2">test2</td>
    <td><input type="hidden" name="color[]" value="blue">blue</td>
    <td><input type="hidden" name="size[]" value="S">S</td>
  </tr>
</tbody>
</table>
</form>

The get() method will convert a jQuery collection to a plain array, and for the first occurrence, that will be an array of 2 elements, since there are two tr elements.

The second one will return an array with 4 elements, both times, since both tr elements have 4 input elements. But this array of 4 elements is converted to an object with 4 properties via reduce, which iterates over those inputs and adds a property for each of them to the object that starts out as an empty one ({}).

The call replace(/\[.*\]/,'') will remove the bracketed part from the name attribute values.

Collectives™ on Stack Overflow

How to convert form arrays to JSON in Javascript? (array of objects)?

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related