Query-string encoding of a Javascript Object

Question

Do you know a fast and simple way to encode a Javascript Object into a string that I can pass via a GET Request   No jQuery  no other frameworks - just plain Javascript

User · Answer

This one skips null undefined values  export function urlEncodeQueryParams data        const params   Object keys data  map key   gt  data key       encodeURIComponent key     encodeURIComponent data key                return params filter value   gt    value  join   amp

User · Answer

To do it in better way  It can handle recursive objects or arrays in the STANDARD query form like a val amp b 0  val amp b 1  val amp c val amp d some key  val  here s the final function  Logic  Functionality const objectToQueryString    initialObj    gt      const reducer    obj  parentPrefix   null    gt   prev  key    gt        const val   obj key       key   encodeURIComponent key       const prefix   parentPrefix      parentPrefix    key      key       if  val    null    typeof val      function           prev push    prefix            return prev             if    number    boolean    string   includes typeof val           prev push    prefix    encodeURIComponent val            return prev             prev push Object keys val  reduce reducer val  prefix       join   amp          return prev          return Object keys initialObj  reduce reducer initialObj       join   amp         Example const testCase1       name   Full Name     age  30    const testCase2       name   Full Name     age  30    children         name   Child foo         name   Foo again          wife        name   Very Difficult to say here         console log objectToQueryString testCase1    console log objectToQueryString testCase2     Live Test Expand the snippet below to verify the result in your browser -  x000D   x000D  const objectToQueryString    initialObj    gt      const reducer    obj  parentPrefix   null    gt   prev  key    gt        const val   obj key       key   encodeURIComponent key       const prefix   parentPrefix      parentPrefix    key      key       if  val    null    typeof val      function           prev push    prefix            return prev             if    number    boolean    string   includes typeof val           prev push    prefix    encodeURIComponent val            return prev             prev push Object keys val  reduce reducer val  prefix       join   amp          return prev          return Object keys initialObj  reduce reducer initialObj       join   amp         const testCase1       name   Full Name     age  30    const testCase2       name   Full Name     age  30    children         name   Child foo         name   Foo again          wife        name   Very Difficult to say here         console log objectToQueryString testCase1    console log objectToQueryString testCase2    x000D   x000D   x000D   Things to consider   It skips values for functions  null  undefined It skips keys and values for empty objects and arrays  It doesn t handle Number or String Objects made with new Number 1  or new String  my string   because NO ONE should ever do that

User · Answer

This is a solution that will work for  NET backends out of the box  I have taken the primary answer of this thread and updated it to fit our  NET needs   function objectToQuerystring params    var result            function convertJsonToQueryString data  progress  name            name   name                progress   progress                if  typeof data      object                 Object keys data  forEach function  key                    var value   data key                   if  name                              convertJsonToQueryString value  progress  key                     else                       if  isNaN parseInt key                              convertJsonToQueryString value  progress  name         key                         else                           convertJsonToQueryString value  progress  name         key                                                                         else               result   result   result concat   amp      result concat                   result   result concat    name    data                          convertJsonToQueryString params       return result

User · Answer

Rails   PHP Style Query Builder  This method converts a Javascript object into a URI Query String  Also handles nested arrays and objects  in Rails   PHP syntax    function serializeQuery params  prefix      const query   Object keys params  map  key    gt        const value    params key        if  params constructor     Array        key      prefix          else if  params constructor     Object        key    prefix      prefix    key      key        if  typeof value      object         return serializeQuery value  key       else       return    key    encodeURIComponent value              return    concat apply     query  join   amp           Example Usage   let params       a  100    b   has spaces     c   1  2  3     d    x  9  y  8     serializeQuery params     returns  a 100 amp b has 20spaces amp c   1 amp c   2 amp c   3 amp d x  9 amp d y  8

User · Answer

While there are limits to query-string lengths that should be considered  for sending JSON data in HTTP s GET calls versus using POST      JSON stringify yourJSON  will create a String from your JSON object  Then just hex-encode it  link below   That will work ALWAYS versus various possible problems with base64 type URL encoding  UTF-8 characters  nested JSON objects and such  https   developer mozilla org en-US docs Web JavaScript Reference Global Objects JSON stringify Encode String to HEX

User · Answer

If you want to convert a nested object recursively and the object may or may not contain arrays  and the arrays may contain objects or arrays  etc   then the solution gets a little more complex  This is my attempt   I ve also added some options to choose if you want to record for each object member at what depth in the main object it sits  and to choose if you want to add a label to the members that come from converted arrays   Ideally you should test if the thing parameter really receives an object or array   function thingToString thing maxDepth recordLevel markArrays         thing  object or array to be recursively serialized       maxDepth  int or false           int  how deep to go with converting objects arrays within objs arrays         false  no limit to recursive objects arrays within objects arrays       recordLevel  boolean           true - insert   level 1   before transcript of members at level one  etc          false - just        markArrays  boolean           insert text to indicate any members that came from arrays     var result           if  maxDepth     false  amp  amp  typeof maxDepth     number    maxDepth   3       var runningDepth   0   Keeps track how deep we re into recursion        First prepare the function  so that it can call itself recursively     function serializeAnything thing             Set path-finder values         runningDepth    1          if recordLevel  result      level     runningDepth                    First convert any arrays to object so they can be processed         if  thing instanceof Array               var realObj      var key              if  markArrays   realObj  type      converted array                for  var i   0 i  lt  thing length i                     if  markArrays   key    a    i   else  key   i                   realObj key    thing i                             thing   realObj              console log  converted one array to     typeof realObj               console log thing                        Then deal with it         for  var member in thing               if  typeof thing member      object   amp  amp  runningDepth  lt  maxDepth                   serializeAnything thing member                      When a sub-object array is serialized  it will add one to                   running depth  But when we continue to this object array s                   next sibling  the level must go back up by one                 runningDepth -  1                else if  maxDepth     false  amp  amp  runningDepth  gt   maxDepth                    console log  Reached bottom                  else              if                   typeof thing member      string                      typeof thing member      boolean                     typeof thing member      number                                 result          member          thing member                         else                   result          member           typeof thing member      not supported                                          Actually kick off the serialization     serializeAnything thing        return result

User · Answer

Here s a one liner in ES6   Object keys obj  map k   gt     encodeURIComponent k     encodeURIComponent obj k      join   amp

User · Answer

Here is a simple answer that deals with strings and arrays at the same time during conversion   jsonToQueryString  function  data            return Object keys data  map  key    gt                if  Array isArray data key                      return     encodeURIComponent key     data key  map  item    gt  encodeURIComponent item   join   2C                                 return    encodeURIComponent key     encodeURIComponent data key                  join   amp

User · Answer

Well  everyone seems to put his one-liner here so here goes mine   const encoded   Object entries obj  map   k  v     gt     k    encodeURIComponent v     join   amp

User · Answer

In ES7 you can write this in one line   const serialize    obj    gt   Object entries obj  map i   gt   i 0   encodeURIComponent i 1    join       join   amp

User · Answer

like this    x000D   x000D  serialize   function obj    x000D    var str       x000D    for  var p in obj  x000D      if  obj hasOwnProperty p     x000D        str push encodeURIComponent p          encodeURIComponent obj p     x000D        x000D    return str join   amp     x000D    x000D   x000D  console log serialize   x000D    foo   hi there   x000D    bar   100   x000D       x000D     foo hi 20there amp bar 100 25 x000D   x000D   x000D    Edit  this one also converts recursive objects  using php  array  notation for the query string    x000D   x000D  serialize   function obj  prefix    x000D    var str       x000D      p  x000D    for  p in obj    x000D      if  obj hasOwnProperty p     x000D        var k   prefix   prefix         p         p  x000D          v   obj p   x000D        str push  v     null  amp  amp  typeof v      object     x000D          serialize v  k    x000D          encodeURIComponent k          encodeURIComponent v    x000D        x000D      x000D    return str join   amp     x000D    x000D   x000D  console log serialize   x000D    foo   hi there   x000D    bar    x000D      blah  123  x000D      quux   1  2  3  x000D      x000D       x000D     foo hi 20there amp bar 5Bblah 5D 123 amp bar 5Bquux 5D 5B0 5D 1 amp bar 5Bquux 5D 5B1 5D 2 amp bar 5Bquux 5D 5B2 5D 3 x000D   x000D   x000D

User · Answer

A small amendment to the accepted solution by user187291   serialize   function obj       var str          for var p in obj          if  obj hasOwnProperty p                str push encodeURIComponent p          encodeURIComponent obj p                      return str join   amp         Checking for hasOwnProperty on the object makes JSLint JSHint happy  and it prevents accidentally serializing methods of the object or other stuff if the object is anything but a simple dictionary  See the paragraph on for statements in this page  http   javascript crockford com code html

User · Answer

Addition for accepted solution  this works with objects  amp  array of objects   parseJsonAsQueryString   function  obj  prefix  objName        var str           for  var p in obj            if  obj hasOwnProperty p                 var v   obj p               if  typeof v     object                     var k    objName   objName                prefix   prefix         p         p                   str push parseJsonAsQueryString v  k                  else                   var k    objName   objName                prefix   prefix         p   p                   str push encodeURIComponent k          encodeURIComponent v                      str push k         v                                     return str join   amp         Also have added objName if you re using object parameters like in asp net mvc action methods

User · Answer

ES6 SOLUTION FOR QUERY STRING ENCODING OF A JAVASCRIPT OBJECT  const params       a  1    b   query stringify     c  null    d  undefined    f        g    foo  1  bar  2      h    Winterfell    Westeros    Braavos      i    first    second    third  3        static toQueryString params       prefix      const query   Object keys params  map  k    gt        let key   k      const value   params key        if   value  amp  amp   value     null    value     undefined    isNaN value            value                  switch  params constructor          case Array          key      prefix              break        case Object          key    prefix      prefix    key      key           break             if  typeof value      object           return this toQueryString value  key      for nested objects            return    key    encodeURIComponent value              return query join   amp            toQueryString params     a 1 amp b query 20stringify amp c  amp d  amp f  amp g foo  1 amp g bar  2 amp h   Winterfell amp h   Westeros amp h   Braavos amp i first  second  third  3

User · Answer

Refer from the answer  user187291  add  isArray  as parameter to make the json nested array to be converted   data                         staffId    00000001                       Detail                                identityId     123456                                                    identityId     654321                                                To make the result     staffId 00000001 amp Detail 0  identityId 123456 amp Detail 1  identityId 654321  serialize   function obj  prefix  isArray            var str      p   0          for  p in obj                if  obj hasOwnProperty p                     var k  v                  if  isArray                      k   prefix   prefix         p         p  v   obj p                   else                     k   prefix   prefix         p        p  v   obj p                    if  v     null  amp  amp  typeof v      object                         if  Array isArray v                             serialize v  k  true                         else                           serialize v  k  false                                           else                       var query   k         v                      str push query                                                     return str join   amp                 serialize data   prefix   false

User · Answer

If you want to pass an entire object as a single param  e g  filter  param1   val1   param2   val2    const serializeObject    obj    gt      let objStr   JSON stringify obj      objStr   objStr replace     g  encodeURIComponent          objStr   objStr replace    g  encodeURIComponent          objStr   objStr replace    g  encodeURIComponent           return objStr      let res   serializeObject  param1   val1   param2   val2     console log  serializeObject    res      7B param1  3A val1   param2  3A val2  7D console log  serializeObject-decoded    decodeURIComponent res        param1   val1   param2   val2

User · Answer

With Node js v6 6 3  const querystring   require  querystring    const obj       foo   bar     baz   tor     let result   querystring stringify obj     foo bar amp baz tor   Reference  https   nodejs org api querystring html

User · Answer

It seems that till now nobody mention another popular library qs  You can add it   yarn add qs  And then use it like that import qs from  qs   const array     a    b   c      const stringified   qs stringify array    encode  false     console log stringified    -- outputs a b  c

User · Answer

Single line to convert Object into Query String in case somebody need it again  let Objs     a   obejct-a   b   object-b     Object keys objs  map key   gt  key         objs key   join   amp        result will be a object-a amp b object-b

User · Answer

here is a simple implementation that gets an object and converts it to query params string  export function objectToQueryParams queryParams  object   string     return queryParams       Object entries queryParams  reduce  acc   key  val   index    gt          const sign   index     0           amp          acc       sign   encodeURIComponent key     encodeURIComponent val           return acc

User · Answer

I have a simpler solution that does not use any third-party library and is already apt to be used in any browser that has  Object keys   aka all modern browsers   edge   ie    In ES5   function a       if  typeof a       object             return         return     Object keys a  map k  gt    k    a k     join   amp           In ES3   function a       if  typeof a       object             return         return       Object keys a  map function k   return k         a k     join   amp

User · Answer

Do you need to send arbitrary objects  If so  GET is a bad idea since there are limits to the lengths of URLs that user agents and web servers will accepts  My suggestion would be to build up an array of name-value pairs to send and then build up a query string   function QueryStringBuilder         var nameValues            this add   function name  value            nameValues push   name  name  value  value                 this toQueryString   function             var segments       nameValue          for  var i   0  len   nameValues length  i  lt  len  i                  nameValue   nameValues i               segments i    encodeURIComponent nameValue name          encodeURIComponent nameValue value                     return segments join   amp               var qsb   new QueryStringBuilder    qsb add  veg    cabbage    qsb add  vegCount    5     alert  qsb toQueryString

User · Answer

const querystring        querystring stringify   function  obj  sep     amp    eq            const escape   encodeURIComponent    const qs         let key   null     for  key in obj  if  obj hasOwnProperty key         qs push escape key    eq   escape String obj key            return qs join sep        Example   const a    querystring stringify  a   all of them   b  true    console log a       Output  a all 20of 20them amp b true

User · Answer

ok  it s a older post but i m facing this problem and i have found my personal solution   maybe can help someone else         function objToQueryString obj           var k   Object keys obj           var s               for var i 0 i lt k length i                  s    k i          encodeURIComponent obj k i                 if  i    k length -1  s      amp                      return s

User · Answer

Just use URLSearchParams This works in all current browsers  new URLSearchParams object  toString

User · Answer

A little bit look better  objectToQueryString obj  prefix        return Object keys obj  map objKey   gt            if  obj hasOwnProperty objKey                 const key   prefix      prefix    objKey      objKey              const value   obj objKey                return typeof value      object                    this objectToQueryString value  key                       encodeURIComponent key     encodeURIComponent value                        return null         join   amp

User · Answer

My implementation of encoding object as query string  using reduce   export const encodeAsQueryString    params    gt      Object keys params  reduce  acc  key   gt       params hasOwnProperty key                acc  encodeURIComponent key          encodeURIComponent params key            acc          join   amp

User · Answer

With Ramda       R pipe R toPairs  R map R join        R join   amp      a   b   b   a

User · Answer

Just another way  no recursive object       getQueryString   function obj             result              for param in obj           result      encodeURIComponent param          encodeURIComponent obj param       amp             if result    it s not empty string when at least one key value pair was added  In such case we need to remove the last   amp   char          result   result substr 0  result length - 1     If length is zero or negative  substr returns an empty string  ref  http   msdn microsoft com en-us library 0esxc5wy v VS 85  aspx         return result        alert  getQueryString  foo   hi there   bar  123  quux  2

User · Answer

const serialize   obj   gt  Object keys obj  reduce  a  b    gt      a push encodeURIComponent b          encodeURIComponent obj b     amp  amp  a          join   amp       Call   console log serialize  a 1 b 2        output   a 1 amp b 2

User · Answer

Here s the coffeescript version of accepted answer  This might save time to someone   serialize    obj  prefix  - gt    str        for p  v of obj     k   if prefix then prefix         p       else p     if typeof v     object        str push serialize v  k       else       str push encodeURIComponent k          encodeURIComponent v      str join   amp

User · Answer

Here s a concise  amp  recursive version with Object entries   It handles arbitrarily nested arrays  but not nested objects   It also removes empty elements     const format    k v    gt  v     null      k    encodeURIComponent v          const to qs    obj    gt        return    concat    Object entries obj                          map   k v     gt  Array isArray v                               v map arr   gt  to qs   k  arr                                 format k v                filter x   gt  x              join   amp         E g      let json          a   1  2  3       b                      omit b     c  1      d   test amp encoding      uriencode     e    4 5   6 7         flatten this     f  null                omit nulls     g  0     let qs   to qs json     gt   a 1 amp a 2 amp a 3 amp c 1 amp d test 26encoding amp e 4 amp e 5 amp e 6 amp e 7 amp g 0

User · Answer

The above answers fill not work if you have a lot of nested objects  Instead you can pick the function param from here - https   github com knowledgecode jquery-param blob master jquery-param js It worked very well for me       var param   function  a        var s       rbracket                    isArray   function  obj                return Object prototype toString call obj        object Array               add   function  k  v                v   typeof v      function    v     v     null        v     undefined        v              s s length    encodeURIComponent k          encodeURIComponent v              buildParams   function  prefix  obj                var i  len  key               if  prefix                    if  isArray obj                         for  i   0  len   obj length  i  lt  len  i                              if  rbracket test prefix                                 add prefix  obj i                              else                               buildParams prefix          typeof obj i       object    i              obj i                                                                      else if  obj  amp  amp  String obj        object Object                          for  key in obj                            buildParams prefix         key        obj key                                            else                       add prefix  obj                                   else if  isArray obj                     for  i   0  len   obj length  i  lt  len  i                          add obj i  name  obj i  value                                   else                   for  key in obj                        buildParams key  obj key                                                return s                  return buildParams     a  join   amp    replace   20 g

User · Answer

jQuery has a function for this  jQuery param    if you re already using it you can use that  http   api jquery com jquery param   example   var params     width 1680  height 1050    var str   jQuery param  params      str now contains width 1680 amp height 1050

User · Answer

x000D   x000D  const buildSortedQuery    args    gt    x000D      return Object keys args  x000D           sort   x000D           map key   gt    x000D              return window encodeURIComponent key  x000D                        x000D                    window encodeURIComponent args key    x000D             x000D           join   amp     x000D     x000D   x000D  console log buildSortedQuery   x000D    foo   hi there   x000D    bar   100   x000D       x000D   x000D    bar 100 25 amp foo hi 20there x000D   x000D   x000D

User · Answer

I ve written a package just for that  object-query-string     Supports nested objects  arrays  custom encoding functions etc  Lightweight  amp  jQuery free      TypeScript import   queryString   from  object-query-string       Node js const   queryString     require  object-query-string     const query   queryString       filter            brands    Audi            models    A4    A6    A8            accidentFree  true            sort   mileage         returns  filter brands    Audi amp filter models    A4 amp filter models    A6 amp filter models    A8 amp filter accidentFree  true amp sort milage

User · Answer

Just use the following   encodeURIComponent JSON stringify obj      x000D   x000D     elastic search example x000D  let story    x000D     query     x000D       bool     x000D         must     x000D            x000D             term      x000D               revision published   0   x000D              x000D             x000D            x000D             term      x000D               credits properties by properties name    Michael Guild  x000D              x000D             x000D            x000D             nested     x000D               path    taxonomy sections   x000D               query     x000D                 bool     x000D                   must     x000D                      x000D                       term     x000D                         taxonomy sections  id     science  x000D                        x000D                       x000D                      x000D                       term     x000D                         taxonomy sections  website    staging  x000D                        x000D                      x000D                    x000D                  x000D                x000D              x000D            x000D          x000D        x000D      x000D    x000D   x000D   x000D  const whateva   encodeURIComponent JSON stringify story   x000D  console log whateva  x000D   x000D   x000D

User · Answer

I made a comparison of JSON stringifiers and the results are as follows   JSON        id   5973782bdb9a930533b05cb2   isActive  true  balance    1 446 35   age  32  name   Logan Keller   email   logankeller artiq com   phone    1  952  533-2258   friends     id  0  name   Colon Salazar     id  1  name   French Mcneil     id  2  name   Carol Martin     favoriteFruit   banana   Rison      id  5973782bdb9a930533b05cb2  age 32 balance   1 446 35  email  logankeller artiq com  favoriteFruit banana friends    id 0 name  Colon Salazar    id 1 name  French Mcneil    id 2 name  Carol Martin    isActive  t name  Logan Keller  phone   1  952  533-2258   O-Rison   id  5973782bdb9a930533b05cb2  age 32 balance   1 446 35  email  logankeller artiq com  favoriteFruit banana friends    id 0 name  Colon Salazar    id 1 name  French Mcneil    id 2 name  Carol Martin    isActive  t name  Logan Keller  phone   1  952  533-2258  JSURL       id  5973782bdb9a930533b05cb2 isActive true balance   1 2c446 35 age 32 name  Logan 20Keller email  logankeller 40artiq com phone   2b1 20 28952 29 20533-2258 friends    id 0 name  Colon 20Salazar   id 1 name  French 20Mcneil   id 2 name  Carol 20Martin   favoriteFruit  banana  QS        id 5973782bdb9a930533b05cb2 amp isActive true amp balance  1 446 35 amp age 32 amp name Logan Keller amp email logankeller artiq com amp phone  1  952  533-2258 amp friends 0  id  0 amp friends 0  name  Colon Salazar amp friends 1  id  1 amp friends 1  name  French Mcneil amp friends 2  id  2 amp friends 2  name  Carol Martin amp favoriteFruit banana URLON      id 5973782bdb9a930533b05cb2 amp isActive true amp balance  1 446 35 amp age 32 amp name Logan 20Keller amp email logankeller artiq com amp phone  1 20 952  20533-2258 amp friends  id 0 amp name Colon 20Salazar  amp  id 1 amp name French 20Mcneil  amp  id 2 amp name Carol 20Martin   amp favoriteFruit banana QS-JSON  isActive true amp balance  241 2C446 35 amp age 32 amp name Logan Keller amp email logankeller 40artiq com amp phone  2B1  952  533-2258 amp friends 0  id 0 amp friends 0  name Colon Salazar amp friends 1  id 1 amp friends 1  name French Mcneil amp friends 2  id 2 amp friends 2  name Carol Martin amp favoriteFruit banana   The shortest among them is URL Object Notation

User · Answer

You can also achieve this by using simple JavaScript    x000D   x000D  const stringData     name Nikhil amp surname Mahirrao amp age 30   x000D       x000D  const newData      x000D  stringData replace          split   amp    map  value    gt    x000D    const temp   value split       x000D    newData temp 0     temp 1   x000D      x000D   x000D  console log  stringData    stringData   x000D  console log  newData      x000D  console log newData   x000D   x000D   x000D

User · Answer

Object keys obj  reduce function a k  a push k     encodeURIComponent obj k    return a      join   amp      Edit  I like this one-liner  but I bet it would be a more popular answer if it matched the accepted answer semantically   function serialize  obj         let str         Object keys obj  reduce function a  k           a push k         encodeURIComponent obj k             return a             join   amp         return str

User · Answer

I suggest using the URLSearchParams interface   x000D   x000D  const searchParams   new URLSearchParams    const params    foo   hi there   bar   100      Object keys params  forEach key   gt  searchParams append key  params key     console log searchParams toString    x000D   x000D   x000D   Or by passing the search object into the constructor like this   x000D   x000D  const params    foo   hi there   bar   100      const queryString   new URLSearchParams params  toString    console log queryString   x000D   x000D   x000D

[javascript] Query-string encoding of a Javascript Object

Examples related to javascript

Examples related to query-string

Examples related to urlencode