JavaScript FormData Sort Entries (without jQuery)

Question

I have some code that uses jQuery and needs re-writing to use native JS but I am having trouble with one section of it where what it does is:

Obtains the form data
Sorts the keys alphabetically
Loops through the elements to create a new array of items based on the form

This is what works in jQuery:

let formData = $('#TheForm').serialize();
let formItems = formData.split("&");
formItems.sort();
for (const element of formItems) {
  //Do stuff here
}

This is what I have so far in native JS that does not yet work:

var theForm = document.getElementById('TheForm');
let formData = new FormData(theForm);
let formItems = formData.entries();
//formItems.sort(); <-- Can't work out a way to do this
for (let [key, value] of formItems) {
  //Do stuff here
}

I think once I can figure out a way to sort the entries this will hopefully work and the code in the for loop can be simplified as it is having to extract the key and value on the = sign (from element) currently but in the new version the key and value are already separate.

The reason I am sorting the keys is because this form submits to the Barclays payment system (EPDQ) and requires the form elements to be in alphabetical order and I must also encrypt them, sending both the unencrypted and encrypted values where the server only accepts the data if the encrypted version matches when the remote server performs the same function. Within the loop I am populating both encrypted and unencrypted arrays so it is easier to sort at this point rather than later.

Thanks I really appreciate the help (below).

Gian Marco Toso · Accepted Answer · 2021-02-02 20:44:16Z

2

Since the entries function returns an Iterator, you'll first want to get an Array from that:

    const formItems = Array.from(formData.entries())

At this point you have an Array of pairs, each pair being a tuple, an Array where the first element represents the "key" and the second one the "value". This is good though, because you now have an array on which you can call the sort function, that just so happens to be able receive a comparator function!

    const sortedItems = formItems.sort(
        ([leftKey], [rightKey]) => leftKey > rightKey ? -1 : 1
    )

The sort function is receiving an arrow function, where the two parameters (the two items being compared) are destructured in order to extract the first value of each of them into a variable - each of them being a pair, an array of two values, this works out just fine.

answered Feb 2, 2021 at 20:44

Gian Marco Toso

12.2k5 gold badges32 silver badges39 bronze badges

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

6 Comments

Randy Casburn Over a year ago

Curious - OP's question mentioned sorting the entries alphabetically, not the keys.

Gian Marco Toso Over a year ago

You might be right, I interpreted the "entries" as the tuple itself, so I went for the key, but if "entries" means the actual values then he should be able to do so by changing the comparator function to use the second entry in each pair.

Gian Marco Toso Over a year ago

Also - but I'm not familiar enough with jQuery so I might as well be wrong - by looking at the original code the sort happens on array of key=value items, which is the result of a .split call on a string delimited by & (a query string?), so sorting by key should be the right way to go.

Randy Casburn Over a year ago

Yeah - we don't know. I'm more curious about why sorting the first place knowing you'll be transforming the data in a loop anyway.

Robin Wilson Over a year ago

Thanks a lot for your help @Gian. This looks like it will do exactly what I need. I have edited my original question to clarify that it was the keys I needed to sort, and my reasons for needing to do it. Yes the jQuery code ends up outputting key1=value1&key2=value2.... The above is much easier as an array as saves the string manipulation. Thanks again.

|

goulashsoup · Accepted Answer · 2023-05-15 13:51:10Z

0

A small enhancement to Gian Marco Tosos answer using localeCompare:

Array
    .from(formData.entries())
    .sort(([leftKey], [rightKey]) => leftKey.localeCompare(rightKey)) // Sort form keys alphabetically.

answered May 15, 2023 at 13:51

goulashsoup

3,2362 gold badges43 silver badges68 bronze badges

Collectives™ on Stack Overflow

JavaScript FormData Sort Entries (without jQuery)

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related