Difference between Objects (javascript and jquery)

Question

This may be a strange question. I'm trying to fuse two arrays together, but the read out is showing them as separate types of objects. The first type, gathered by the .serializeArray() jquery function is showing as this when I alert them:

[object Object]

The second, which I am getting from pushing each option in using a more JS way, shows as this:

[object HTMLOptionElement]

Here's my code below:

   incrCopy();
   enableSubmit();
   disableReset();

   var linkedInArray = [];
   $('form select option.linked-in').each( function() {
   linkedInArray.push(this);
   })
   //These alert the second way

   prevVals = $("form").serializeArray();
   //They alert the first way
   prevVals.push(linkedInArray);
   alert(prevVals);

Anyone have an idea on what I'm missing here?

Okay, I'm not sure of the difference academically, but I realized when I called $(this) instead of 'this' in the each loop, the objects looked the same. — streetlight
– streetlight, Commented Oct 25, 2012 at 18:18
I was just about to put that in as an answer. The HTML element doesn't become a jQuery object until wrapped in $() — Michael Berkowski
– Michael Berkowski, Commented Oct 25, 2012 at 18:19
Well, serializeArray collects the values from the form fields and creates an array of objects (api.jquery.com/serializeArray). linkedInArray.push(this); directly adds the DOM element to the array. You are just doing two different things. — Felix Kling
– Felix Kling, Commented Oct 25, 2012 at 18:19
You'll get better information if you use console.log, and console.dir via the developer console than you ever will via alert. — zzzzBov
– zzzzBov, Commented Oct 25, 2012 at 18:23
Array does not equal list in js. They are completely different structures. — vdbuilder
– vdbuilder, Commented Oct 25, 2012 at 18:25

user229044 · Accepted Answer · 2012-10-25 18:31:51Z

2

This is not a difference between jQuery and JavaScript. That is how serializeArray works. It doesn't return a list of HTML elements, it returns a list of plain-old-objects with name/value properties.

For example, were it to find something like this:

<input name="user[eye_color]" value="brown" />
<input name="user[age]" value="47" />

it would return an array of plain-old-objects, looking something like this:

[
  {
    name: "user[eye_color]",
    value: "brown"
  },
  {
    name: "user[age]",
    value: 47
  }
]

Conversly, your first loop iterates over a jQuery selector, where each element is a native HTMLElement of some kind (HTMLDivElement, HTMLInputElement, HTMLTableElement, etc).

edited Oct 25, 2012 at 18:31

answered Oct 25, 2012 at 18:26

user229044♦

241k41 gold badges347 silver badges350 bronze badges

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

Collectives™ on Stack Overflow

Difference between Objects (javascript and jquery)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related