Not able to loop through array in JSON, jQuery

Question

I've a form with input fields as follows:

<form "data-qustion_form"=true>
  <input name="question[description]" value="quesd">
  <input name="question[answers][0][description]" value="ansd1">
  <input name="question[answers][1][description]" value="ansd2">
</form>

I'm using https://github.com/marioizquierdo/jquery.serializeJSON to convert the form data to json. Also tried using https://stackoverflow.com/a/8407771/707636. Both works great. But the I'm not able to loop through the array in the json.

I've following js

$("[data-question_form]").on("submit", function(e) {
  var o = $(this).serializeObject();  // $(this).serializeJSON(); both results same
  console.log(o);
  console.log(o["question"]);
  console.log(o["question"]["answers"]);
  $.each(question["answers"], function() {
    console.log("print test");  // I don't see this on console in Chrome inspector
  }
  e.preventDefault();
}

The output on console in Chrome inspector is as follow:

Object {utf8: "✓", question: Object}
Object {description: "quesd", answers: Array[0]}
[1362289041238: Object, 1362289045644: Object]

Further expanding [1362289041238: Object, 1362289045644: Object] shows the length: 0.

How can I iterate through this array to read each answer description in jQuery?

$.each(question["answers"], function() { looks wrong to me. — jchapa
– jchapa, Commented Mar 3, 2013 at 5:57
I did also try $.each(question["answers"], function(k,v) { console.log(v); }, didn't work. — Bongs
– Bongs, Commented Mar 3, 2013 at 5:58

mgibsonbr · Accepted Answer · 2013-03-03 06:36:07Z

1

I wasn't able to find any problem with your code (see example), either using serializeObject - with the code in the linked answer - or using serializeJSON - with the code from GitHub. Your markup, however, had to be adjusted:

<form "data-qustion_form"=true>

to:

<form data-question_form="true">

P.S. as @jchapa pointed out, the question["answers"] was wrong too - and the parenthesis didn't balance. But I'm assuming it's just the code you pasted here, your actual code must be right (or you wouldn't get any results at all).

  $.each(o["question"]["answers"], function() {
    console.log("print test");  // I don't see this on console in Chrome inspector
  });
});

answered Mar 3, 2013 at 6:36

mgibsonbr

22.1k7 gold badges73 silver badges115 bronze badges

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

1 Comment

jchapa Over a year ago

Nice answer - pushed you to 10k ;)

Bongs · Accepted Answer · 2013-03-03 06:35:29Z

0

Okay, I just solved it but making a small change in the name attribute of input elements. Added [] before the counter as follows:

<input name="question[answers][][0][description]" value="ansd1">
<input name="question[answers][][1][description]" value="ansd2">

Now I'm able to loop through it :)

answered Mar 3, 2013 at 6:35

Bongs

5,5924 gold badges32 silver badges52 bronze badges

Collectives™ on Stack Overflow

Not able to loop through array in JSON, jQuery

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related