Convert a nested object/ associative array into a query string using JavaScript

Question

I want to use JavaScript to convert an object into a query string.

For example, I want to convert:

{
    a: 'hello',
    b: {
      b1: 'my',
      b2: 'friend',
      b3: {
          c: 90
      }
    }
}

to:

?a=hello&b%5Bb1%5D=my&b%5Bb2%5D=friend&b%5Bb3%5D%5Bc%5D=90

I have found quite a few answers to this here: Flatten a javascript object to pass as querystring , but they don't seem to deal with the issue of associative arrays (or objects within objects).

I found a good answer for JQuery which works fine by using jQuery.param, but i would like an answer using either native JS or Underscore.js.

How can I do this?

daiqingyun · Accepted Answer · 2017-02-09 01:39:58Z

you can do this:

let obj = {
        a: 'hello',
        b: {
          b1: 'my',
          b2: 'friend',
          b3: {
              c: 90
          }
        }
    }

function getQueryString(obj, encode) {

      function getPathToObj(obj, path = []) {
        let result = [];

        for (let key in obj) {
          if (!obj.hasOwnProperty(key)) return;

          //deep copy
          let newPath = path.slice();
          newPath.push(key);

          let everyPath = [];
          if (typeof obj[key] === "object") {
            everyPath = getPathToObj(obj[key], newPath);
          } else {
            everyPath.push({
              path: newPath,
              val: obj[key]
            });
          }

          everyPath.map((item) => result.push(item))
        }

        return result;
      }

      function composeQueryString(paths) {
        let result = "";
        paths.map((item) => {
          let pathString = "";
          if (item.path.length > 1) {
            pathString = item.path.reduce((a, b, index) => {
              return a + '['+ b +']';
            })
          } else {
            pathString = item.path[0];
          }

          if (result) {
            pathString = "&" + pathString + '=' + item.val;
          } else {
            pathString = "?" + pathString + '=' + item.val;
          }

          result += pathString;
        });

        return result;
      }

      const str = composeQueryString(getPathToObj(obj));
      return encode === true ? encodeURI(str) : str;
    }
    console.log(getQueryString(obj, true));

get: ?a=hello&b%5Bb1%5D=my&b%5Bb2%5D=friend&b%5Bb3%5D%5Bc%5D=90

Tobi Kremer · Accepted Answer · 2017-02-09 07:57:03Z

3

I highly recommend not trying to reinvent existing wheels. Your own implementation is probably going to be much less flexible and way more error-prone (have you thought about encoding the query string parameters correctly, for instance?) Instead, take a look at the query-string module.

edited Feb 9, 2017 at 7:57

answered Feb 8, 2017 at 9:49

Tobi Kremer

6789 silver badges23 bronze badges

7 Comments

Yahya Uddin Over a year ago

What do you mean? I didn't add an implementation. I'm asking for an implementation. Also I believe that the URL I provided was encoded fine. Have a look at: freeformatter.com/url-parser-query-string-splitter.html and paste the URL and see for yourself.

Tobi Kremer Over a year ago

All I'm saying is that the implementation you're GOING TO BE MAKING has a high probability of ending up much worse than already existing modules which pay attention to funky edge-cases and come with proper test suites.

Yahya Uddin Over a year ago

Oh you mean just use a library

Tobi Kremer Over a year ago

Exactly! :) query-string will solve your problem in no time. It comes from a well-known developer and if you take a look at the source you'll see it's not trivial to get these things right.

Tobi Kremer Over a year ago

I have neither used Alloy nor Titanium, but if they really make it impossible/too hard to use third-party npm modules, I'd probably extract the relevant parts from the query-string module or just copy it altogether. It only has two dependencies: One brings the Object.assign method to Node-versions 4 and under (hoping you don't need this in Titanium/Alloy), and the other one (strict-uri-encode) is basically one line of code.

|

Aakash · Accepted Answer · 2020-07-31 04:47:44Z

1

With `Axios` you can easily achieve this:

const instance = axios.create({
  url: '/user',
  baseUrl: 'https://my-api-server'
});
const config = {
  params: {
    a: 'hello',
    b: {
      b1: 'my',
      b2: 'friend',
      b3: {
        c: 90
      }
    }
  }
}
const uri = instance.getUri(config)
document.write(uri)

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

For more information you can visit this answer.

Good Luck...

answered Jul 31, 2020 at 4:47

Aakash

24.1k7 gold badges110 silver badges89 bronze badges

1 Comment

Mike K Over a year ago

Saved me a lot of time and even more lines of code..

Collectives™ on Stack Overflow

Convert a nested object/ associative array into a query string using JavaScript

3 Answers 3

Comments

7 Comments

With `Axios` you can easily achieve this:

For more information you can visit this answer.

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

7 Comments

With Axios you can easily achieve this:

For more information you can visit this answer.

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related

With `Axios` you can easily achieve this: