Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #35109

Re: Serialise form with input of type image

Show all headers | View raw

On 23/05/2018 22:21, Andrew Poulos wrote:
> On 24/05/2018 5:42 AM, JR wrote:
>> function serialiseForm(frm) {
>>    return [].map.call([...frm.elements,
>>      ...frm.querySelectorAll("input[type=image]")],
>>      el => ({type:el.type /*, ...*/}));
>> }
> 
> When I tried this
> 
> function serialiseForm(frm) {
>    return [].map.call([frm.elements,
                         ^^^
>   frm.querySelectorAll("input[type=image]")],
     ^^^
>      el => ({type:el.type}));
> }
> 
> I got this in the console
> 
> (2) [{…}, {…}]
>    0: {type: undefined}
>    1: {type: undefined}
>    length: 2
>    __proto__: Array(0)
> 
> though the form contains numerous elements. Why is that happening?

You have omitted the spread operator (three dots) in [...frm.elements, 
...frm.querySelectorAll("input[type=image]")].

The spread operator, introduced in ECMA2015 (aka ES6), turns the items 
of an iterable into arguments of a function call or into elements of an 
Array [1][2]. E.g.

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2];

Unlike concat(), push(), etc., you can use the spread operator to insert 
an array anywhere inside another array.

const odd = [1, 3, 5 ];
const nums = [2, ...odd, 4 , 6];

So, I've used the spread operator to concatenate the Array-like objects 
returned by frm.elements and frm.querySelectorAll("input[type=image]") 
into the serialiseForm() function:

function serialiseForm(frm) {
   return [].map.call([...frm.elements,
     ...frm.querySelectorAll("input[type=image]")],
     el => ({type:el.type /*, ...*/}));
}

It's also possible to use Array.from(array, mapFn) as in:

function serialiseForm(frm) {
   return Array.from([...frm.elements,
       ...frm.querySelectorAll("input[type=image]")
     ],
     el => ({
       tagname: el.tagName,
       type: el.type /*, ...*/
     })
   );
}

[1] 
<http://exploringjs.com/es6/ch_parameter-handling.html#sec_spread-operator>
[2] 
<https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax>

Cheers,
Joao Rodrigues

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

Serialise form with input of type image Andrew Poulos <ap_prog@hotmail.com> - 2018-05-17 15:37 +1000
  Re: Serialise form with input of type image Andrew Poulos <ap_prog@hotmail.com> - 2018-05-17 18:56 +1000
  Re: Serialise form with input of type image "Christoph M. Becker" <cmbecker69@arcor.de> - 2018-05-17 13:24 +0200
    Re: Serialise form with input of type image Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2018-05-22 15:55 +0200
      Re: Serialise form with input of type image Andrew Poulos <ap_prog@hotmail.com> - 2018-05-23 10:17 +1000
  Re: Serialise form with input of type image JR <jr@yahoo.com> - 2018-05-23 16:42 -0300
    Re: Serialise form with input of type image Andrew Poulos <ap_prog@hotmail.com> - 2018-05-24 11:21 +1000
      Re: Serialise form with input of type image Joao Rodrigues <jr@yahoo.com> - 2018-05-24 00:41 -0300
        Re: Serialise form with input of type image Andrew Poulos <ap_prog@hotmail.com> - 2018-05-24 18:17 +1000

csiph-web