create json from input type array in javascript

Question

On submitting a form I am getting a form object and making object. Now situation is I have input type array, for example I have input type "Task links" on click plus sign each time I am adding new input type text up to five. It could be three, two, five or in case I increase up to twenty in future, how I will handle it in javascript to make object, see the code below

See screenshot for better understanding

<input type="text" name="arr[]">
<input type="text" name="arr[]">

function submit_task_form (form_obj) {

    var get_form = document.getElementById(form_obj);

    var form_data = {};
    for(var i=0; i<get_form.length; i++) {
        form_data.task_link = get_form[i];
    }

Are you sure you want an object rather than an array. If it's an object you want, what are the keys because all you're doing at the moment is replacing task_link in the object each time with the link from the next input in the iteration. — Andy
– Andy, Commented Nov 10, 2017 at 11:47

Andy · Accepted Answer · 2017-11-10 12:21:18Z

2

It's not really clear whether you need an object or an array, so here's a couple of examples that show both. These examples are in ES6. I can rewrite them in ES5 if you're not familiar with the syntax.

Both examples assume that there is a class called link on the input elements (to differentiate them from any other inputs you might have).

<input class="link" value="sdfs" />

1) Array DEMO

Pick up the inputs and iterate over them with map:

function getLinks() {
  const links = document.querySelectorAll('.link');
  return [...links].map(link => link.value);
}

OUTPUT

[ "sdfs", "34", "min", "987" ]

ES5 syntax DEMO

function getLinks() {
  var links = document.querySelectorAll('.link');
  var arr = [];
  for (var i = 0; i < links.length; i++) {
    arr.push(links[i].value);
  }
  return arr;
}

2) Object DEMO

This utilises a data-id attribute as the key for the link values.

<input class="link" data-id="1" value="sdfs" />

This time we create an object with reduce instead.

function getLinks() {
  const links = document.querySelectorAll('.link');
  return [...links].reduce((obj, link) => {
    const id = link.dataset.id;
    obj[id] = link.value;
    return obj;
  }, {});
}

OUTPUT

{
  1: "sdfs"
  2: "34"
  3: "min"
  4: "987"
}

ES5 Syntax DEMO

function getLinks() {
  const links = document.querySelectorAll('.link');
  var obj = {};
  for (var i = 0; i < links.length; i++) {
    let id = links[i].dataset.id;
    obj[id] = links[i].value;
  }
  return obj;
}

edited Nov 10, 2017 at 12:21

answered Nov 10, 2017 at 12:08

Andy

63.6k13 gold badges72 silver badges99 bronze badges

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

8 Comments

Nick Taylor Over a year ago

I didnt understand the syntax

Nick Taylor Over a year ago

I need an object to pass it to php via ajax at the end

Nick Taylor Over a year ago

data: {action: "submit_task_form_with_ajax", form_data: form_data},

Nick Taylor Over a year ago

or I think I can assign an array of input types to the key of object

Nick Taylor Over a year ago

I don't know, any suggestion :)

|

Collectives™ on Stack Overflow

create json from input type array in javascript

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related