Convert Value from input to Object Array

Question

I have task which need to convert from input value to format object array like this:

[{
    id: 1,
    worker_id: 2,
    status:1
 },{
    id: 2,
    worker_id: 2,
    status: 1
 },{
    id: 3,
    worker_id: 2,
    status:1
}]

I have multiple row for my input.

<!-- row1 -->
<input type="text" id="id" value="1"/>
<input type="text" id="worker_id" value="2"/>
<input type="text" id="status" value="1"/>

<!-- row2 -->
<input type="text" id="id" value="2"/>
<input type="text" id="worker_id" value="2"/>
<input type="text" id="status" value="1"/>

<!-- row3 -->
<input type="text" id="id" value="2"/>
<input type="text" id="worker_id" value="2"/>
<input type="text" id="status" value="1"/>

<input type="submit" value="submit" />

How can I do this in jQuery? Thank you for any help!

updated

Once I click button submit, can this format pass to text field?

[[1,2,1],[2,2,1],[3,2,1]]

Dont have, because now just getting start to understand how to use array object in jquery. Do you know how to do it ? see on updated — Fai Zal Dong
– Fai Zal Dong, Commented Oct 6, 2016 at 8:08
just an FYI - when using html the id attribute... it is mean to be unique across the entire page. I would stuggest that you name your id with the unique number i.e id="id1" next row id="id2" for all elements in rows.. ie. id="worker_id1" next row id="worker_id2", there should never be more than 1 hrml id the same for the entire page. if you want to group then use class.. i.e elements which have something in common. — Seabizkit
– Seabizkit, Commented Oct 6, 2016 at 8:13
further to this... to solve your problem wrap each "row" in a div... then give the div a class. then look through the class... i.e. the "rows" mapping into props. — Seabizkit
– Seabizkit, Commented Oct 6, 2016 at 8:16

Rory McCrossan · Accepted Answer · 2016-10-06 08:14:01Z

5

If you can structure your HTML to separate the groups of input, with div elements for example, then you can use map() to create the output you need.

Also note that id attributes must be unique within the page. In your case you could use a data* attribute to store the identifier for the given input element. Try this:

var arr = $('div').map(function() {
  var o = {};
  $(this).find('input').each(function() {
    o[$(this).data('id')] = this.value;
  });
  return o;
}).get();
console.log(arr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="text" data-id="id" value="1" />
  <input type="text" data-id="worker_id" value="2" />
  <input type="text" data-id="status" value="1" />
</div>
<div>
  <input type="text" data-id="id" value="2" />
  <input type="text" data-id="worker_id" value="2" />
  <input type="text" data-id="status" value="1" />
</div>
<div>
  <input type="text" data-id="id" value="2" />
  <input type="text" id="worker_id" value="2" />
  <input type="text" data-id="status" value="1" />
</div>

The output format in your update ([{1,2,1},{2,2,1},{3,2,1}]) is not possible as objects must have keys and values. Instead you could use a multi-dimensional array. You can amend the above to do this:

var arr = $('div').map(function() {
  return [$(this).find('input').map(function() {
    return this.value;
  }).get()]
}).get();
console.log(arr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="text" data-id="id" value="1" />
  <input type="text" data-id="worker_id" value="2" />
  <input type="text" data-id="status" value="1" />
</div>
<div>
  <input type="text" data-id="id" value="2" />
  <input type="text" data-id="worker_id" value="2" />
  <input type="text" data-id="status" value="1" />
</div>
<div>
  <input type="text" data-id="id" value="2" />
  <input type="text" data-id="worker_id" value="2" />
  <input type="text" data-id="status" value="1" />
</div>

edited Oct 6, 2016 at 8:14

answered Oct 6, 2016 at 8:02

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

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

2 Comments

Fai Zal Dong Over a year ago

but if I want the value pass to only 1 text field which hold value like this can? [{1,2,1},{2,2,1},{3,2,1}]

Rory McCrossan Over a year ago

That's not possible as objects must have a key and a value. You could return a multi-dimensional array instead though. I've updated my answer to show you how to do that

Seabizkit · Accepted Answer · 2016-10-06 08:27:29Z

THIS IS NOT A COMPLETE ANSWER BUT SHOULD BE REALLY HELPFUL

suggested HTML, rename as you see fit

<!-- row1 -->
<div class"workerRow">
    <input type="text" class="workerRow_id" value="1"/>
    <input type="text" class="workerRow_worker_id" value="2"/>
    <input type="text" class="workerRow_status" value="1"/>
</div>

<!-- row2 -->
<div class"workerRow">
    <input type="text" class="workerRow_id" value="2"/>
    <input type="text" class="workerRow_worker_id" value="2"/>
    <input type="text" class="workerRow_status" value="1"/>
</div>

<!-- row3 -->
<div class"workerRow">
    <input type="text" class="workerRow_id" value="2"/>
    <input type="text" class="workerRow_worker_id" value="2"/>
    <input type="text" class="workerRow_status" value="1"/>
</div>

<input type="submit" value="submit" />

jquery to target..

$('.workerRow').each(function(elem) {
   var id = elem.find(".workerRow_id").val();
   var worker_id = elem.find(".workerRow_worker_id").val();
   var status = elem.find(".workerRow_status").val();

    //map the values how ever you see fit.
});

Collectives™ on Stack Overflow

Convert Value from input to Object Array

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related