Is there a simple way to convert a complex JS object to query params?

Question

I have a JS object with nested arrays, take this one for example:

{
   array: [
    {
        name: 'test-1'
    },
    {
        name: 'test-2'
    }
   ]
   simpleParam: 1,
   complexParam: {
    attribute: 2
   }
}

I need to convert it to query params because the API I'm consuming needs to read them in the following format:

"array[0].name='test-1'&array[1].name='test-2'&simpleParam=1&complexParam.attribute=2"

I'd like to know if there's a simple way to do this like JSON.stringify() which in this case does not fit my needs or if I'd need to write my own generic algorithm to do this transformation.

EDIT I'd like to use plain JS and it's important to notice that there'd be arrays in the object I want to format

You can probably use some sort of library to compress this. But there is no built-in generic way to do what you want. — VLAZ, Jun 24 '19 at 13:26
I know this is picky, but that's not JSON. Did you mean "javascript object" instead? — evolutionxbox, Jun 24 '19 at 13:28
JSON is always a *string*. You have a JS object literal, not JSON. — , Jun 24 '19 at 13:34
Possible duplicate of [Query-string encoding of a Javascript Object](https://stackoverflow.com/questions/1714786/query-string-encoding-of-a-javascript-object) — Lucas, Jun 24 '19 at 13:43

score 2 · Accepted Answer · answered Jun 24 '19 at 13:37

This is from a class I wrote for something else:

var data = {
  array: [{
      name: 'test-1'
    },
    {
      name: 'test-2'
    }
  ],
  simpleParam: 1,
  complexParam: {
    attribute: 2
  }
};

var urlstring = stringifyObject(data);

console.log(urlstring);
console.log(decodeURIComponent(urlstring));

/**
 * Provided an object, it will convert it to a query string
 * @param data object to convert
 * @returns query string
 */
function stringifyObject(data) {
  var value, key, tmp = [];
  const encodeFunc = data => encodeURIComponent('' + data).replace(/!/g, '%21')
    .replace(/'/g, '%27').replace(/\(/g, '%28').replace(/\)/g, '%29')
    .replace(/\*/g, '%2A').replace(/%20/g, '+');
  const _hbqHelper = (key, val) => {
    var k, tmp = [];
    if (val === true) val = '1';
    else if (val === false) val = '0';
    if (val !== null) {
      if (typeof val === 'object') {
        for (k in val)
          if (val[k] !== null)
            tmp.push(_hbqHelper(key + '[' + k + ']', val[k], '&'));
        return tmp.join('&');
      } else if (typeof val !== 'function') return encodeFunc(key) + '=' + encodeFunc(val);
      else return false;
    } else return '';
  };
  for (key in data) {
    value = data[key];
    var query = _hbqHelper(key, value, '&');
    if (query === false) continue;
    if (query !== '') tmp.push(query)
  }
  return tmp.join('&');
}

Lucas · Answer 2 · 2019-06-24T13:44:43.650

0

You could do it like this with jQuery.param() and decodeURI() hoping the output is what you're looking for.

var myObj = {
   array: [
    {
        name: 'test-1'
    },
    {
        name: 'test-2'
    }
   ],
   simpleParam: 1,
   complexParam: {
    attribute: 2
   }
};

console.log(decodeURI($.param(myObj)));
// array[0][name]=test-1&array[1][name]=test-2&simpleParam=1&complexParam[attribute]=2

edited Jun 24 '19 at 13:44

answered Jun 24 '19 at 13:34

Lucas

1,833
1
18
19

If it's a duplicate, you are supposed to flag it as such. – VLAZ Jun 24 '19 at 13:35
I edited it to stress the fact that there are arrays inside the object, so the answer to the duplicated one doesn't completely apply though it's true they're similar – David Letrán Jun 24 '19 at 13:50
don't provide jquery answers to questions that aren't marked jquery. – I wrestled a bear once. Jun 24 '19 at 20:15

Is there a simple way to convert a complex JS object to query params?

2 Answers2