JavaScript Array to URLencoded

Question

is there any js function to convert an array to urlencoded? i'm totally newbie n JS... thanks!...

my array is a key & value array.... so,

myData=new Array('id'=>'354313','fname'=>'Henry','lname'=>'Ford');

is the same as

myData['id']='354313';
myData['fname']='Henry';
myData['lname']='Ford';
myData.join('&'); //returns error, it doesn't work on such array...

is there any solution?

oh sory... i have an array like this

var myData=new Array('id'=>'354313','fname'=>'Henry','lname'=>'Ford');

then i need the array converted to be:

id=354313&fname=Henry&lname=Ford

Are you talking about URL encoding each string in an array or concatenating them into a URL query string or..? — jerluc
– jerluc, Commented Jan 11, 2011 at 9:43
Url encoding is only applied to strings. If you wish to apply it to an array, you first need to explain what you mean by that - do you wish to concatenate the array into a single string? Do you wish to encode individual array elements? How do you treat non-string array elements (such as objects, functions or other arrays)? It would be a good idea to edit your question to include at least one example of what you wish to achieve (original array, resulting url-encoded string). — Victor Nicollet
– Victor Nicollet, Commented Jan 11, 2011 at 9:47
@theHack You can take a look to my answer stackoverflow.com/a/65610041/5798934 — Máxima Alekz
– Máxima Alekz, Commented Sep 1, 2021 at 19:19
key-value arrays are objects, for anyone confused by the wording! — RockyK
– RockyK, Commented Jul 9, 2022 at 20:02

Dinei · Accepted Answer · 2018-07-09 19:31:37Z

37

Try this:

var myData = {'id': '354313', 'fname':'Henry', 'lname': 'Ford'};
var out = [];

for (var key in myData) {
    if (myData.hasOwnProperty(key)) {
        out.push(key + '=' + encodeURIComponent(myData[key]));
    }
}

out.join('&');

For an explanation about why use hasOwnProperty, take a look at this answer to "How do I loop through or enumerate a JavaScript object?".

edited Jul 9, 2018 at 19:31

Dinei

5,7834 gold badges43 silver badges64 bronze badges

answered Jul 19, 2011 at 17:38

jgrund

3671 gold badge3 silver badges2 bronze badges

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

2 Comments

Elia Weiss Over a year ago

It's better to do: out.push(key + '=' + encodeURIComponent(arr[key]));

ICW Over a year ago

Has own property is not necessary for this data

Dennis Heiden · Accepted Answer · 2018-10-24 12:11:57Z

19

If you use jQuery, can use $.param(). Check here . Example of using

var myData = {'id' : '354313', 'fname' : 'Henry', 'lname' : 'Ford'};
var url = "https://stackoverflow.com?" + $.param(myData);

Output is

https://stackoverflow.com?id=354313&fname=Henry&lname=Ford

Also works with an array of objects (like from jQuery(form).serializeArray()) :

var myData = [{'id' : '354313'}, {'fname' : 'Henry'},{'lname' : 'Ford'}];

edited Oct 24, 2018 at 12:11

Dennis Heiden

7978 silver badges16 bronze badges

answered Apr 4, 2018 at 13:18

Eduard Brokan

1,4831 gold badge12 silver badges8 bronze badges

Comments

はると · Accepted Answer · 2011-01-11 10:53:47Z

15

You can do something like this:

var myData = new Array('id=354313', 'fname=Henry', 'lname=Ford');
var url = myData.join('&');

answered Jan 11, 2011 at 10:53

はると

1,5098 silver badges20 bronze badges

2 Comments

earthmeLon Over a year ago

I'd go with var url = '?' + myData.join('&');

Máxima Alekz Over a year ago

@earthmeLon That is not a proper solution, take a look into stackoverflow.com/a/65610041/5798934

romiguelangel · Accepted Answer · 2017-10-23 15:36:43Z

11

If you use an object instead of an array you can do this (ES6) :

var myData = {
    id: 354313,
    fname: 'Henry',
    lname: 'Ford',
    url: 'https://es.wikipedia.org/wiki/Henry_Ford',
};

encodeDataToURL = (data) => {
    return Object
      .keys(data)
      .map(value => `${value}=${encodeURIComponent(data[value])}`)
      .join('&');
 }

console.log(encodeDataToURL(myData));

answered Oct 23, 2017 at 15:36

romiguelangel

1611 silver badge3 bronze badges

Comments

Máxima Alekz · Accepted Answer · 2022-11-20 18:53:51Z

Late to the party, but this solution I have made can handle recursivity, and nested array/object

function is(className, object) {
    return Object.prototype.toString.call(object) === '[object '+ className +']';
}

const DataEncoder = function() {
    this.levels = [];
}

DataEncoder.prototype.__dataEncoding = function(data, actualKey = null) {
    let finalString = '';
    if (actualKey) {
        this.levels.push(actualKey);
    }

    const keys = Object.keys(data);
    const l = keys.length;
    for(let a = 0; a < l; a++) {
        const key = keys[a];
        let value = data[key];

        if (is('Object', value)) {
            finalString += this.__dataEncoding(value, key);
        } else if (is('Array', value)) {
            const arrValSize = value.length;
            for (let b = 0; b < arrValSize; b++) {
                let arrVal = value[b];
                if (actualKey) {
                    finalString += actualKey;
                    for(let c = 1; c < this.levels.length; c++) finalString += '[' + this.levels[c] + ']';
                    if (arrVal === undefined || arrVal === null) arrVal = '';
                    finalString += '[' + key + '][]=' + arrVal + '&';
                } else {
                    if (arrVal === undefined || arrVal === null) arrVal = '';
                    finalString += key + '[]=' + arrVal + '&';
                }
            }
        } else {
            if (actualKey) {
                finalString += this.levels[0];
                for(let c = 1; c < this.levels.length; c++) finalString += '[' + this.levels[c] + ']';
                if (value === undefined || value === null) value = '';
                finalString += '[' + key + ']=' + value + '&';
            } else {
                if (value === undefined || value === null) value = '';
                finalString += key + '=' + value + '&';
            }
        }
    }
    this.levels.pop();
    return finalString;
}

DataEncoder.prototype.encode = function(data) {
    if (!is('Object', data) || data === {}) return null;
    return this.__dataEncoding(data).slice(0, -1);
}

Usage:

const testData = {
  name: "John",
  age: 13,
  skills: ['games', 'programming', 'reading', 'singing'],
  invests: {
    education: [120.3, 50.5],
    kids: 70,
    optical: {
      north: 20.5,
      south: 10.70,
      west: 6,
      east: [7]
    },
    deeper: {
      first: {
        landing: 5
      }
    }
  }
};
const encoder = new DataEncoder();
encoder.encode(testData);

Result:

name=John&age=13&skills[]=games&skills[]=programming&skills[]=reading&skills[]=singing&invests[education][]=120.3&invests[education][]=50.5&invests[kids]=70&invests[optical][north]=20.5&invests[optical][south]=10.7&invests[optical][west]=6&optical[optical][east][]=7&invests[deeper][first][landing]=5

I know that it needs encodeURIComponent method, but can be added easily

EDIT, IMPROVEMENTS

function is(className, object) {
    return Object.prototype.toString.call(object) === '[object '+ className +']';
}

const DataEncoder = function() {
    this.levels = [];
    this.actualKey = null;

}

DataEncoder.prototype.__dataEncoding = function(data) {
    let uriPart = '';
    const levelsSize = this.levels.length;
    if (levelsSize) {
      uriPart = this.levels[0];
      for(let c = 1; c < levelsSize; c++) {
        uriPart += '[' + this.levels[c] + ']';
      }
    }
    let finalString = '';
    if (is('Object', data)) {
        const keys = Object.keys(data);
        const l = keys.length;
        for(let a = 0; a < l; a++) {
            const key = keys[a];
            let value = data[key];
            this.actualKey = key;
            this.levels.push(this.actualKey);
            finalString += this.__dataEncoding(value);
        }
    } else if (is('Array', data)) {
        if (!this.actualKey) throw new Error("Directly passed array does not work")
        const aSize = data.length;
        for (let b = 0; b < aSize; b++) {
            let aVal = data[b];
            this.levels.push(b);
            finalString += this.__dataEncoding(aVal);
        }
    } else {
        finalString += uriPart + '=' + encodeURIComponent(data) + '&';
    }
    this.levels.pop();
    return finalString;
}

DataEncoder.prototype.encode = function(data) {
    if (!is('Object', data) || !Object.keys(data).length) return null;
    return this.__dataEncoding(data).slice(0, -1);
}

Now it can handle any deep, with nested array/objects, this edit has the same usage

const testData = {
  name: "John",
  age: 13,
  skills: ['games', 'programming', 'reading', 'singing'],
  invests: {
    education: [120.3, 50.5],
    kids: 70,
    optical: {
      north: 20.5,
      south: 10.70,
      west: 6,
      east: [7]
    },
    deeper: {
      first: {
        landing: 5,
        arrayLike: [
          {
            despite: true,
            superb: 'yes',
            omg: {
              kiss: ['la'],
              maybe: {
                thiss: {
                  wont: {
                    work: 'false'
                  }
                }
              }
            },
            incredible: ['lalolanda', 'raidcall', 'phase', [5], [{waw: '@wesome'}]],
          }
        ]
      }
    }
  }
};
const encoder = new DataEncoder();
encoder.encode(testData);

Result:

name=John&age=13&skills[0]=games&skills[1]=programming&skills[2]=reading&skills[3]=singing&invests[education][0]=120.3&invests[education][1]=50.5&invests[kids]=70&invests[optical][north]=20.5&invests[optical][south]=10.7&invests[optical][west]=6&invests[optical][east][0]=7&invests[deeper][first][landing]=5&invests[deeper][first][arrayLike][0][despite]=true&invests[deeper][first][arrayLike][0][superb]=yes&invests[deeper][first][arrayLike][0][omg][kiss][0]=la&invests[deeper][first][arrayLike][0][omg][maybe][thiss][wont][work]=false&invests[deeper][first][arrayLike][0][incredible][0]=lalolanda&invests[deeper][first][arrayLike][0][incredible][1]=raidcall&invests[deeper][first][arrayLike][0][incredible][2]=phase&invests[deeper][first][arrayLike][0][incredible][3][0]=5&invests[deeper][first][arrayLike][0][incredible][4][0][waw]=%40wesome

need improvement to work with simple array like ["1","2","3"]
@meYnot you just need to send something like {data: ["1","2","3"]} and will work
This looks promising! You did not by any chance also make a decoder that fits your encoder? And how do you distinguish between arrays and objects from that URL?
I was just thinking about encoding cause the server does actually decode the data automatically

Makord Sp · Accepted Answer · 2019-08-21 21:15:52Z

2

var myObject = {
  a: {
    one: 1,
    two: 2,
    three: 3
  },
  b: [ 1, 2, 3 ]
};
var recursiveEncoded = $.param( myObject );
var recursiveDecoded = decodeURIComponent( $.param( myObject ) );

alert( recursiveEncoded );
alert( recursiveDecoded );

The values of recursiveEncoded and recursiveDecoded are alerted as follows:

a%5Bone%5D=1&a%5Btwo%5D=2&a%5Bthree%5D=3&b%5B%5D=1&b%5B%5D=2&b%5B%5D=3 a[one]=1&a[two]=2&a[three]=3&b[]=1&b[]=2&b[]=3

https://api.jquery.com/jQuery.param/

answered Aug 21, 2019 at 21:15

Makord Sp

212 bronze badges

Comments

Vincent · Accepted Answer · 2011-01-11 09:43:56Z

0

Look at the function escape and unescape.

answered Jan 11, 2011 at 9:43

Vincent

2571 gold badge2 silver badges4 bronze badges

Comments

SEoF · Accepted Answer · 2015-09-23 14:33:15Z

0

Taken from jgrunds answer, if you want to extend the array functionality

Array.prototype.toQueryString = function(){
    var out = new Array();

    for(key in this){
        out.push(key + '=' + encodeURIComponent(this[key]));
    }

    return out.join('&');
}

Or if you want a standalone function

function arrayToQueryString(array_in){
    var out = new Array();

    for(var key in array_in){
        out.push(key + '=' + encodeURIComponent(array_in[key]));
    }

    return out.join('&');
}

edited Sep 23, 2015 at 14:33

answered Nov 27, 2014 at 9:38

SEoF

1,13416 silver badges28 bronze badges

Collectives™ on Stack Overflow

JavaScript Array to URLencoded

8 Answers 8

2 Comments

Comments

2 Comments

Comments

EDIT, IMPROVEMENTS

6 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

2 Comments

Comments

2 Comments

Comments

EDIT, IMPROVEMENTS

6 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related