Mapping object to key=value string in one line

Question

Is there a way to convert this object:

{
    lang: 'en-us',
    episode: 12
}

To a string with the following format?

"lang=en-us&episode=12"

Much like mapping an object to a query string, where each property is a query parameter.

I can do it like this:

var parameters = [];
for(var prop in obj)
   parameters.push(prop + '=' + obj[prop]);
return parameters.join('&');

But I was looking for a one-line solution. Is this possible?

PS: I cannot use jQuery and any of it utility functions. The solution must be in pure JavaScript.

... Put it into a function? Unrelated, but if the values can be arbitrary, make sure you make them into URL-safe strings. — Dave Newton
– Dave Newton, Commented Sep 8, 2015 at 18:40
A "one-line" requirement in JavaScript doesn't make much sense, as you can just put all the code in the same line. In what manner would the code be a one-line solution? — Guffa
– Guffa, Commented Sep 8, 2015 at 18:40

ssube · Accepted Answer · 2015-09-08 18:44:07Z

17

You can use Array.prototype.map on the Object.keys array:

var data = {"lang": "en-us", "episode": 12};
var str = Object.keys(data).map(function (key) { 
  return "" + key + "=" + data[key]; // line break for wrapping only
}).join("&");
console.log(str);

With ES6, this becomes even more terse:

var data = {"lang": "en-us", "episode": 12};
var str = Object.keys(data).map(key => `${key}=${data[key]}`).join("&");
console.log(str);

answered Sep 8, 2015 at 18:44

ssube

48.4k10 gold badges107 silver badges144 bronze badges

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

Comments

Deftwun · Accepted Answer · 2015-09-08 18:50:25Z

4

You could use

var myObj ={"lang": "en-us", "episode": 12};
var str = Object.keys(myObj).map(key => key+"="+myObj[key]).join("&");

Whether or not this is any more readable is another question :)

answered Sep 8, 2015 at 18:50

Deftwun

1,23213 silver badges22 bronze badges

Comments

tdy · Accepted Answer · 2022-02-18 09:28:42Z

3

Object.entries (ES6)

Object.entries returns [key, value] pairs, so we can destructure and map the pairs directly into ${key}=${value}:
```
Object.entries(params).map(([key, value]) => `${key}=${value}`).join('&');
// "lang=en-us&episode=12"
```

`URLSearchParams`

For the specific use case of query strings, use URLSearchParams.toString:

let searchParams = new URLSearchParams(params);

searchParams.toString();
// "lang=en-us&episode=12"

URLSearchParams provides an interface with common utility methods, e.g.:

searchParams.get('episode');
// "12"

searchParams.sort();
// "episode=12&lang=en-us"

searchParams.set('episode', 123456);
// "episode=123456&lang=en-us"

edited Feb 18, 2022 at 9:28

answered Feb 18, 2022 at 8:24

tdy

42.1k42 gold badges124 silver badges125 bronze badges

Comments

Craig Wayne · Accepted Answer · 2021-07-12 16:27:32Z

2

All the other answers work perfectly,

However I've found that you can use URLSearchParams for the same thing...

var myObj = {keyOne: 'keyOneValue', keyTwo: 'keyTwoValue'};
var queryParams = new URLSearchParams(myObj).toString();
console.log(queryParams);
// keyOne=keyOneValue&keyTwo=keyTwoValue

see: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

answered Jul 12, 2021 at 16:27

Craig Wayne

5,1674 gold badges40 silver badges52 bronze badges

Comments

Aravin · Accepted Answer · 2022-11-17 09:44:43Z

If the value contains equalTo (=) symbol, the accepted solution will not work.

Example

key1=a,key2=b,keyc=keyof=thec
accesskey=absdsfdfsa===

Solution:

Better to use Regex,

const a =
  'AccountName=devstoreaccount1;AccountKey=Eby8vdM02xNOcqFlqUwJPLlmEtlCDXJ1OUzFT50uSRZ6IFsuFq2UVErCz4I6tq/K1SZFPTOtr/KBHBeksoGMGw==;DefaultEndpointsProtocol=http;BlobEndpoint=http://127.0.0.1:10000/devstoreaccount1;QueueEndpoint=http://127.0.0.1:10001/devstoreaccount1;TableEndpoint=http://127.0.0.1:10002/devstoreaccount1';

  const output = {};

  a.split(';').forEach((v, i) => {
    const [key, value] = v.split(RegExp(/=(.*)/));
    output[key] = value;
  })

  console.log(output);

output Note: AccountKey contains == in value

{
  AccountName: 'devstoreaccount1',
  AccountKey: 'Eby8vdM02xNOcqFlqUwJPLlmEtlCDXJ1OUzFT50uSRZ6IFsuFq2UVErCz4I6tq/K1SZFPTOtr/KBHBeksoGMGw==',
  DefaultEndpointsProtocol: 'http',
  BlobEndpoint: 'http://127.0.0.1:10000/devstoreaccount1',
  QueueEndpoint: 'http://127.0.0.1:10001/devstoreaccount1',
  TableEndpoint: 'http://127.0.0.1:10002/devstoreaccount1'
}

Collectives™ on Stack Overflow

Mapping object to key=value string in one line

5 Answers 5

Comments

Comments

`Object.entries` (ES6)

`URLSearchParams`

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Object.entries (ES6)

URLSearchParams

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

`Object.entries` (ES6)

`URLSearchParams`