Push all inputs ids and values into json array

Question

I am getting an error when I run this code this way...

var action = $("#action_button").html();
var results = [];
    
$('#main_form input').each(function(){
    results.push({
        this.id : this.value
        });
});

var json = JSON.stringify(results);

... but I don't get the results I want when I execute it this way...

var action = $("#action_button").html();
var results = [];
    
$('#main_form input').each(function(){
    results.push({
        id:this.id
        value: this.value
        });
});

var json = JSON.stringify(results);

I want it to return:

 {id: "22", first_name: "john", last_name: "smith"}

It is currently returning:

 {"id":"id","value":"22"},{"id":"first_name","value":"john"}, 
 {"id":"last_name","value":"smith"}

uingtea · Accepted Answer · 2021-02-05 01:58:47Z

3

.push() is for array [], for object {} use object[key] = value

var results = {}; // <== object
$('#main_form input').each(function() {
  results[this.id] = this.value;
});

console.log(JSON.stringify(results))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="main_form">

id: <input id="id" value="22" /><br>
name: <input id="first_name" value="john" /> <br> 
surname: <input id="last_name" value="smith" /><br>

</form>

answered Feb 5, 2021 at 1:58

uingtea

6,6342 gold badges32 silver badges45 bronze badges

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

2 Comments

uingtea Over a year ago

@Spring how can results.push({[this.id]: this.value}); same with results[this.id] = this.value; ?

Bourbia Brahim Over a year ago

apologize havent noticed that , my answer clearly wasn't quite right thumbs ;)

Bourbia Brahim · Accepted Answer · 2021-02-05 13:16:38Z

use the array [val] to create dynamic computed property (getting value as key ) as below:

also as @uingtea mentiend use for result object {} instead of array []

$('#main_form input').each(function() {
   results[this.id]= this.value
});

var $actionBtn = $("#action_button");
var results = {};

$actionBtn.on("click", function() {
  $('#main_form input').each(function() {
    results[this.id]= this.value
  });

  var json = JSON.stringify(results);
  console.log(json);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="main_form">

  id ----------> <input id="id" value="22" /><br> 
  name ------> <input id="first_name" value="john" /> <br>
  surname --> <input id="last_name" value="smith" /><br>

</form>


<button id="action_button"> generate</button>

Collectives™ on Stack Overflow

Push all inputs ids and values into json 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