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?

Answer 1

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).