put name and value of form into an array of objects [name: value]

Question

I'm making a multi question survey and I'm trying to save name and value of my form into an object. I am able to put the name and value variables into an alert but I would like to see all the values in one hit, like an array with objects. JS code prints out [object Object] into the alert on the page:

$("button[type='submit']").click(function() {
  //get name and value of each question and put into object
  $("input[type='radio']:checked").each(function() {
    var name = $(this).attr("name");
    var value = $(this).attr("value");
    var obj = {
      name: value
    };
    alert(obj);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="radio">
              <input type="radio" name="A1" value="1" required>
              <span class="radio__control-indicator"></span>1</label>
<label class="radio">
              <input type="radio" name="A1" value="2" required>
              <span class="radio__control-indicator"></span>2</label>

<label class="radio">
              <input type="radio" name="A2" value="1" required>
              <span class="radio__control-indicator"></span>1</label>
<label class="radio">
              <input type="radio" name="A2" value="2" required>
              <span class="radio__control-indicator"></span>2</label>
<button class="button button--primary right" type="submit">Submit Questionaire</button>

Rory McCrossan · Accepted Answer · 2018-02-12 12:36:06Z

Firstly note that this is exactly why you shouldn't use alert() for debugging; it coerces data types. Use console.log(obj) instead. Secondly you should use val() to get the value from form controls.

The major issue with your code is that you cannot use that syntax while providing a variable as the key of the object. You will need to use bracket notation instead, like this:

$("button[type='submit']").click(function() {
  $("input[type='radio']:checked").each(function() {
    var obj = {};
    obj[$(this).attr("name")] = $(this).val();
    console.log(obj);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<label class="radio">
  <input type="radio" name="A1" value="1" required>
  <span class="radio__control-indicator"></span>1
</label>
<label class="radio">
  <input type="radio" name="A1" value="2" required>
  <span class="radio__control-indicator"></span>2
</label>

<label class="radio">
  <input type="radio" name="A2" value="1" required>
  <span class="radio__control-indicator"></span>1
</label>
<label class="radio">
  <input type="radio" name="A2" value="2" required>
  <span class="radio__control-indicator"></span>2
</label>
<button class="button button--primary right" type="submit">Submit Questionaire</button>

Also note that if you're intending to create an array of these objects, then map() would be a better solution:

$("button[type='submit']").click(function() {
  var arr = $("input[type='radio']:checked").map(function() {
    var obj = {};
    obj[$(this).attr("name")] = $(this).val();
    return obj;
  }).get();
  console.log(arr);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<label class="radio">
  <input type="radio" name="A1" value="1" required>
  <span class="radio__control-indicator"></span>1
</label>
<label class="radio">
  <input type="radio" name="A1" value="2" required>
  <span class="radio__control-indicator"></span>2
</label>

<label class="radio">
  <input type="radio" name="A2" value="1" required>
  <span class="radio__control-indicator"></span>1
</label>
<label class="radio">
  <input type="radio" name="A2" value="2" required>
  <span class="radio__control-indicator"></span>2
</label>
<button class="button button--primary right" type="submit">Submit Questionaire</button>

Ele · Accepted Answer · 2018-02-12 12:35:56Z

0

Use an array and stringify the array in order to show it.

A recommendation is logging that using console.log().

var array = [];
$("input[type='radio']:checked").each(function(){  
    var name = $(this).attr("name");
    var value = $(this).attr("value");
    var obj = {name: value};
    array.push(obj);
});

console.log(array); // or console.log(JSON.strigify(array)) or alert(JSON.strigify(array)).

The output of console.log will be shown in the browser's developer tools.

answered Feb 12, 2018 at 12:35

Ele

33.8k7 gold badges43 silver badges80 bronze badges

Collectives™ on Stack Overflow

put name and value of form into an array of objects [name: value]

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related