The Wayback Machine - https://web.archive.org/web/20210123215352/https://github.com/sindresorhus/query-string/pull/276
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for `arrayFormat: 'bracket-separator'` #276

Open
wants to merge 9 commits into
base: master
from

Conversation

@DV8FromTheWorld
Copy link

@DV8FromTheWorld DV8FromTheWorld commented Sep 25, 2020

The idea behind this format is to gain the advantages of short query strings that you have with comma and separator formats while marking a field as explicitly an array via a postfixed [] syntax.

import queryString from 'query-string'

queryString.stringify({ foo: ['one'] }, { arrayFormat: 'bracket-separator' })
// => foo[]=one

queryString.stringify({ foo: ['one', 'two', '', 'four' ] }, { arrayFormat: 'bracket-separator' })
// => foo[]=one,two,,four

queryString.stringify({ foo: ['one', 'two', '', 'four'] }, { arrayFormat: 'bracket-separator', arrayFormatSeparator: '|' })
// => foo[]=one|two||four

queryString.parse('?foo[]=one', { arrayFormat: 'bracket-separator' })
// => {foo: ['one']

queryString.parse('?foo[]=one,two,,four', { arrayFormat: 'bracket-separator' })
// => {foo: ['one', 'two', '', 'four']}

queryString.parse('?foo[]=one|two||four', { arrayFormat: 'bracket-separator', arrayFormatSeparator: '|' })
// => {foo: ['one', 'two', '', 'four']}

There are still are 2 question in regards to implementation:

What should happen for {foo: []}? Currently, it would drop the parameter from the stringified query which is the same as {foo: null}

This is undesirable personally. I feel like {foo: []} should produce ?foo[] unless I specify a flag to drop it.
This would be a deviation from the ?bar&biz that non-arrays get the treatment of when they are null (no trailing =), but I feel like it makes sense as we have enough information to say, explicitly, that this is an array. Whereas if it were {foo: null} we don't know, explicitly, that this is an array, so it would produce ?foo which would mean that it would roundtrip correctly.
However, the only way to produce this would be to change how the system is using Array.prototype.reduce as the reducer function is not ever invoked when the array is empty.

What should happen for {foo: ['one', null, 'three']}. Currently it will drop the null and produce foo[]=one,three

I haven't a strong opinion on this as it matches the functionality of separator. The only deviation from the separator functionality in regards to value dropping is that bracket-separator does not drop empty strings.

@sindresorhus
Copy link
Owner

@sindresorhus sindresorhus commented Dec 27, 2020

What should happen for {foo: []}?

?foo[] would indeed be the best output.

What should happen for {foo: ['one', null, 'three']}

I think dropping the null is the best option.

@sindresorhus
Copy link
Owner

@sindresorhus sindresorhus commented Dec 27, 2020

You need to explicitly document the behavior with empty array, null in array, and empty string in array in the docs.

@sindresorhus sindresorhus changed the title Added support for arrayFormat 'bracket-separator' Add support for `arrayFormat: 'bracket-separator'` Dec 27, 2020
@sindresorhus
Copy link
Owner

@sindresorhus sindresorhus commented Dec 27, 2020

I would also like to see more tests.

.gitignore Outdated Show resolved Hide resolved
index.d.ts Outdated
queryString.parse('foo[]=1', {arrayFormat: 'bracket-separator', arrayFormatSeparator: '|'});
//=> {foo: ['1']}
queryString.parse('foo[]=1|2|3', {arrayFormat: 'separator', arrayFormatSeparator: '|'});

This comment has been minimized.

@sindresorhus

sindresorhus Dec 27, 2020
Owner

It would be more valuable to show

Suggested change
queryString.parse('foo[]=1|2|3', {arrayFormat: 'separator', arrayFormatSeparator: '|'});
queryString.parse('foo[]=1', {arrayFormat: 'separator', arrayFormatSeparator: '|'});

So the user could also see the difference.

This comment has been minimized.

@DV8FromTheWorld

DV8FromTheWorld Jan 14, 2021
Author

I'm not quite following what this is wanting.

I did realize I accidently left the arrayFormat set to separator here instead of bracket-separator, so I've updated that as needed.

index.d.ts Show resolved Hide resolved
@sindresorhus
Copy link
Owner

@sindresorhus sindresorhus commented Dec 27, 2020

And sorry for the slow reply. I've just been overwhelmed with notifications.

@DV8FromTheWorld
Copy link
Author

@DV8FromTheWorld DV8FromTheWorld commented Jan 14, 2021

I believe I've covered all that was asked. Please let me know if something else needs attention.
Thanks!

```
import queryString = require('query-string');
queryString.parse('foo[]', {arrayFormat: 'bracket-separator', arrayFormatSeparator: '|'});

This comment has been minimized.

@sindresorhus

sindresorhus Jan 19, 2021
Owner

Suggested change
queryString.parse('foo[]', {arrayFormat: 'bracket-separator', arrayFormatSeparator: '|'});
queryString.parse('foo[]', {arrayFormat: 'bracket-separator', arrayFormatSeparator: '|'});
@@ -231,7 +252,7 @@ export interface StringifyOptions {
//=> 'foo=1,2,3'
```
- `separator`: Serialize arrays by separating elements with character:
- `separator`: Serialize arrays by separating elements with character:

This comment has been minimized.

@sindresorhus

sindresorhus Jan 19, 2021
Owner

Suggested change
- `separator`: Serialize arrays by separating elements with character:
- `separator`: Serialize arrays by separating elements with character:
```
import queryString = require('query-string');
queryString.stringify({foo: []}, {arrayFormat: 'bracket-separator', arrayFormatSeparator: '|'});

This comment has been minimized.

@sindresorhus

sindresorhus Jan 19, 2021
Owner

Suggested change
queryString.stringify({foo: []}, {arrayFormat: 'bracket-separator', arrayFormatSeparator: '|'});
queryString.stringify({foo: []}, {arrayFormat: 'bracket-separator', arrayFormatSeparator: '|'});
@@ -53,8 +53,29 @@ function encoderForArrayFormat(options) {
return result;
}

const keyValueSep = options.arrayFormat === 'bracket-separator' ?

This comment has been minimized.

@sindresorhus

sindresorhus Jan 19, 2021
Owner

This code path cannot be hit.

```js
const queryString = require('query-string');
//Can handle arrays on a single value to product explicit array

This comment has been minimized.

@sindresorhus

sindresorhus Jan 19, 2021
Owner

Suggested change
//Can handle arrays on a single value to product explicit array
// Can handle arrays on a single value to product explicit array
```js
const queryString = require('query-string');
//Can handle arrays on a single value to product explicit array

This comment has been minimized.

@sindresorhus

sindresorhus Jan 19, 2021
Owner

Suggested change
//Can handle arrays on a single value to product explicit array
// Can handle arrays on a single value to product explicit array

This comment has been minimized.

@sindresorhus

sindresorhus Jan 19, 2021
Owner

The readme and index.d.ts should be in sync.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
2 participants