How to serialize an Object into a list of URL query parameters

Question

Without knowing the keys of a JavaScript Object  how can I turn something like     var obj        param1   something      param2   somethingelse      param3   another     obj param4     yetanother        into     var str    param1 something amp param2 somethingelse amp param3 another amp param4 yetanother

User · Answer

This one-liner also handles nested objects and JSON stringify them as needed  let qs   Object entries obj  map   k  v     gt     k    encodeURIComponent typeof  v       quot object quot    JSON stringify v    v     join   amp

User · Answer

Just for the record and in case you have a browser supporting ES6  here s a solution with reduce   Object keys obj  reduce  prev  key  i    gt         prev   i   0   amp        key    obj key              And here s a snippet in action    x000D   x000D     Just for test purposes x000D  let obj    param1  12  param2   test    x000D   x000D     Actual solution x000D  let result   Object keys obj  reduce  prev  key  i    gt    x000D       prev   i   0   amp        key    obj key    x000D          x000D   x000D     Run the snippet to show what happens  x000D  console log result   x000D   x000D   x000D

User · Answer

You can use jQuery s param method    x000D   x000D  var obj     x000D    param1   something   x000D    param2   somethingelse   x000D    param3   another  x000D    x000D  obj  param4      yetanother   x000D  var str   jQuery param obj   x000D  alert str   x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

Since I made such a big deal about a recursive function  here is my own version   function objectParametize obj  delimeter  q        var str   new Array        if   delimeter  delimeter     amp        for  var key in obj            switch  typeof obj key                 case  string               case  number                   str str length    key         obj key               break              case  object                   str str length    objectParametize obj key   delimeter                       return  q     true               str join delimeter       http   jsfiddle net userdude Kk3Lz 2

User · Answer

Object keys obj  map k   gt     encodeURIComponent k     encodeURIComponent obj k      join   amp

User · Answer

If you re using NodeJS 13 1 or superior you can use the native querystring module to parse query strings   const qs   require  querystring    let str   qs stringify obj

User · Answer

A functional approach     x000D   x000D  var kvToParam   R mapObjIndexed  val  key    gt    x000D    return   amp     key         encodeURIComponent val   x000D      x000D   x000D  var objToParams   R compose  x000D    R replace    amp          x000D    R join      x000D    R values  x000D    kvToParam x000D     x000D   x000D  var o     x000D    username   sloughfeg9   x000D    password   traveller  x000D     x000D   x000D  console log objToParams o    x000D   lt script src  https   cdnjs cloudflare com ajax libs ramda 0 22 1 ramda min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

var str       for  var key in obj        if  str                  str      amp              str    key         encodeURIComponent obj key        Example   http   jsfiddle net WFPen

User · Answer

Object toparams   function ObjecttoParams obj       var p         for  var key in obj           p push key         encodeURIComponent obj key           return p join   amp

User · Answer

A useful code when you have the array in your query   var queryString   Object keys query  map key   gt        if  query key  constructor     Array            var theArrSerialized              for  let singleArrIndex of query key                 theArrSerialized   theArrSerialized   key           singleArrIndex     amp                     return theArrSerialized           else           return key         query key      amp             join      console log       queryString

User · Answer

You could use npm lib query-string  const queryString   require  query-string     querystring stringify   foo   bar   baz    qux    quux    corge            Returns  foo bar amp baz qux amp baz quux amp corge

User · Answer

this method uses recursion to descend into object hierarchy and generate rails style params which rails interprets as embedded hashes  objToParams generates a query string with an extra ampersand on the end  and objToQuery removes the final amperseand    function objToQuery obj     let str   objToParams obj        return str slice 0  str length     function   objToParams obj  subobj     let str           for  let key in obj         if typeof obj key        object            if subobj            str    objToParams obj key      subobj    key               else            str    objToParams obj key       key                       else          if subobj            str       key   subobj    obj key   amp            else           str       key    obj key   amp                            return str

User · Answer

If you use jQuery  this is what it uses for parameterizing the options of a GET XHR request    param  obj    http   api jquery com jQuery param

User · Answer

One line with no dependencies  new URLSearchParams obj  toString       OUT  param1 something amp param2 somethingelse amp param3 another amp param4 yetanother  Use it with the URL builtin like so  let obj     param1   something   param2   somethingelse   param3   another    obj  param4      yetanother   const url   new URL  your url com    url search   new URLSearchParams obj   const response   await fetch url     Edit April 4  2020   null values will be interpreted as the string  null

User · Answer

If you need a recursive function that will produce proper URL parameters based on the object given  try my Coffee-Script one    toParams    params  - gt      pairs          do proc    object params  prefix null  - gt        for own key  value of object         if value instanceof Array           for el  i in value             proc el  if prefix  then    prefix    key      else    key              else if value instanceof Object           if prefix              prefix        key              else             prefix   key           proc value  prefix          else           pairs push if prefix  then    prefix    key     value   else    key    value        pairs join   amp      or the JavaScript compiled     toParams   function params      var pairs  proc    pairs          proc   function object  prefix        var el  i  key  value   results      if  object    null  object   params      if  prefix    null  prefix   null       results           for  key in object          if     hasProp call object  key   continue        value   object key         if  value instanceof Array             results push  function               var  len   results2             results2                 for  i   0   len   value length  i  lt   len  i                  el   value i                results2 push proc el  prefix    null        prefix         key                key                                 return  results2                         else if  value instanceof Object            if  prefix    null              prefix          key                  else             prefix   key                     results push proc value  prefix            else            results push pairs push prefix    null        prefix         key          value        key         value                      return  results            return pairs join   amp          This will construct strings like so   toParams  a   one   b   two   c   x   eight   y    g   h   j    z   asdf   fdsa        a one amp b two amp c x  eight amp c y  0  g amp c y  1  h amp c y  2  j amp c y  z  asdf  fdsa

User · Answer

ES2017 approach   Object entries obj  map   key  val     gt     key    val    join   amp

User · Answer

x000D   x000D  const obj     id  1  name   Neel     x000D  let str       x000D  str   Object entries obj  map   key  val     gt     key    val    join   amp     x000D  console log str   x000D   x000D   x000D

User · Answer

An elegant one   assuming you are running a modern browser or node   var str   Object keys obj  map function key      return key         obj key      join   amp       And the ES2017 equivalent   thanks to Lukas   let str   Object entries obj  map   key  val     gt     key    val    join   amp       Note  You probably want to use encodeURIComponent   if the keys values are not URL encoded

User · Answer

ES6    x000D   x000D  function params data    x000D    return Object keys data  map key   gt     key    encodeURIComponent data key      join   amp     x000D    x000D   x000D  console log params  foo   bar      x000D  console log params  foo   bar   baz   qux       x000D   x000D   x000D

User · Answer

With Axios and infinite depth   x000D   x000D   lt pre gt       lt style gt        textarea           width  80           margin-bottom  20px                label           font-size  18px          font-weight  bold               lt  style gt       lt label gt URI lt  label gt       lt textarea id  uri   rows  7  gt  lt  textarea gt       lt label gt All Defaults  Bonus    lt  label gt       lt textarea id  defaults  rows  20  gt  lt  textarea gt   lt  pre gt    lt script src  https   unpkg com axios dist axios min js  gt  lt  script gt    lt script gt    const instance   axios create       baseUrl   http   my-api-server       url    user         const uri   instance getUri       params          id   1234         favFruits             banana            apple            strawberry                 carConfig            items    keys    laptop            type   sedan           other              music    on    off                 foo   bar                                              const defaults   JSON stringify instance defaults  null  2    document getElementById  uri   value   uri   document getElementById  defaults   value   defaults  lt  script gt  x000D   x000D   x000D   Good Luck

User · Answer

For one level deep     var serialiseObject   function obj        var pairs           for  var prop in obj            if   obj hasOwnProperty prop                 continue                    pairs push prop         obj prop              return pairs join   amp         jsFiddle   There was talk about a recursive function for arbitrarily deep objects     var serialiseObject   function obj        var pairs           for  var prop in obj            if   obj hasOwnProperty prop                 continue                    if  Object prototype toString call obj prop        object Object                  pairs push serialiseObject obj prop                 continue                    pairs push prop         obj prop              return pairs join   amp         jsFiddle   This of course means that the nesting context is lost in the serialisation    If the values are not URL encoded to begin with  and you intend to use them in a URL  check out JavaScript s encodeURIComponent

User · Answer

var str        for  var name in obj         str     name         obj name      amp        str   str slice 0 -1     Give this a shot   Example  http   jsfiddle net T2UWT

[javascript] How to serialize an Object into a list of URL query parameters?

Examples related to javascript