property - Aplane un objeto javascript para pasarlo como cadena de consulta

recorrer array de objetos javascript

Question

Tengo un objeto javascript que necesito aplanar en una cadena para poder pasar como cadena de consulta, ¿cómo lo haría? es decir:

{ cost: 12345, insertBy: ''testUser'' } se convertiría en cost=12345&insertBy=testUser

No puedo usar la llamada jQuery AJAX para esta llamada, sé que podemos usar eso y pasar el objeto como data pero no en este caso. Sin embargo, usar jQuery para aplanar para objetar estaría bien.

Gracias.

Answer 1

Aquí hay otra versión que no es jQuery que utiliza lodash o guión bajo si ya está utilizando una de esas bibliotecas:

var toQueryString = function(obj) {
return _.map(obj,function(v,k){
return encodeURIComponent(k) + ''='' + encodeURIComponent(v);
}).join(''&'');
};

Answer 2

Aquí hay una versión que no es jQuery:

function toQueryString(obj) {
var parts = [];
for (var i in obj) {
if (obj.hasOwnProperty(i)) {
parts.push(encodeURIComponent(i) + "=" + encodeURIComponent(obj[i]));
}
}
return parts.join("&");
}

Answer 3

Esta es una vieja pregunta, pero en la parte superior de las búsquedas de Google, así que estoy agregando esto para completar.

Si 1) no desea utilizar jQuery, pero 2) desea convertir un objeto anidado en una cadena de consulta, entonces (construyendo a partir de Tim Down y las respuestas de Guy), use esto:

function toQueryString(obj, urlEncode) {
//
// Helper function that flattens an object, retaining key structer as a path array:
//
// Input: { prop1: ''x'', prop2: { y: 1, z: 2 } }
// Example output: [
// { path: [ ''prop1'' ], val: ''x'' },
// { path: [ ''prop2'', ''y'' ], val: ''1'' },
// { path: [ ''prop2'', ''z'' ], val: ''2'' }
// ]
//
function flattenObj(x, path) {
var result = [];
path = path || [];
Object.keys(x).forEach(function (key) {
if (!x.hasOwnProperty(key)) return;
var newPath = path.slice();
newPath.push(key);
var vals = [];
if (typeof x[key] == ''object'') {
vals = flattenObj(x[key], newPath);
} else {
vals.push({ path: newPath, val: x[key] });
}
vals.forEach(function (obj) {
return result.push(obj);
});
});
return result;
} // flattenObj
// start with flattening `obj`
var parts = flattenObj(obj); // [ { path: [ ...parts ], val: ... }, ... ]
// convert to array notation:
parts = parts.map(function (varInfo) {
if (varInfo.path.length == 1) varInfo.path = varInfo.path[0];else {
var first = varInfo.path[0];
var rest = varInfo.path.slice(1);
varInfo.path = first + ''['' + rest.join('']['') + '']'';
}
return varInfo;
}); // parts.map
// join the parts to a query-string url-component
var queryString = parts.map(function (varInfo) {
return varInfo.path + ''='' + varInfo.val;
}).join(''&'');
if (urlEncode) return encodeURIComponent(queryString);else return queryString;
}

Use como:

console.log(toQueryString({
prop1: ''x'',
prop2: {
y: 1,
z: 2
}
}, false));

Qué salidas:

prop1=x&prop2[y]=1&prop2[z]=2

Answer 4

JavaScript general:

function toParam(obj) {
var str = "";
var seperator = "";
for (key in obj) {
str += seperator;
str += enncodeURIComponent(key) + "=" + encodeURIComponent(obj[key]);
seperator = "&";
}
return str;
}
toParam({ cost: 12345, insertBy: ''testUser'' })
"cost=12345&insertBy=testUser"

Answer 5

Mi versión ES6 (Javascript puro, no jQuery):

function toQueryString(paramsObject) {
return Object
.keys(paramsObject)
.map(key => `${encodeURIComponent(key)}=${encodeURIComponent(paramsObject[key])}`)
.join(''&'')
;
}

Answer 6

Otra version:

function toQueryString(obj) {
return Object.keys(obj).map(k => {
return encodeURIComponent(k) + "=" + encodeURIComponent(obj[k])
})
.join("&");
}

Answer 7

Pruebe el $.param() :

var result = $.param({ cost: 12345, insertBy: ''testUser'' });

Answer 8

Quieres jQuery.param :

var str = $.param({ cost: 12345, insertBy: ''testUser'' });
// "cost=12345&insertBy=testUser"

Tenga en cuenta que esta es la función utilizada internamente por jQuery para serializar objetos pasados ​​como argumento de data .

Answer 9

Versión ES6 de la respuesta de Jrop (también analiza params anidados)

const toQueryString = (obj, urlEncode = false) => {
if (!obj) return null;
const flattenObj = (x, path = []) => {
const result = [];
Object.keys(x).forEach((key) => {
if (!Object.prototype.hasOwnProperty.call(x, key)) return;
const newPath = path.slice();
newPath.push(key);
let vals = [];
if (typeof x[key] === ''object'') {
vals = flattenObj(x[key], newPath);
} else {
vals.push({ path: newPath, val: x[key] });
}
vals.forEach((v) => {
return result.push(v);
});
});
return result;
};
let parts = flattenObj(obj);
parts = parts.map((varInfo) => {
if (varInfo.path.length === 1) {
varInfo.path = varInfo.path[0]; // eslint-disable-line no-param-reassign
} else {
const first = varInfo.path[0];
const rest = varInfo.path.slice(1);
varInfo.path = `${first}[${rest.join('']['')}]`; // eslint-disable-line no-param-reassign
}
return varInfo;
});
const queryString = parts.map((varInfo) => {
return `${varInfo.path}=${varInfo.val}`;
}).join(''&'');
if (urlEncode) {
return encodeURIComponent(queryString);
}
return queryString;
};

Answer 10

puedes usar esto

function serialize(obj)
{
let str = []
for(var p in obj)
{
if(obj.hasOwnProperty(p)) str.push(encodeURIComponent(p) + ''='' + encodeURIComponent(obj[p]))
}
return str.join(''&'')
}

prueba con JSFiddle en este enlace https://jsfiddle.net/yussan/kwmnkca6/

Answer 11

var myObj = { cost: 12345, insertBy: ''testUser'' },
param = '''',
url = ''http://mysite.com/mypage.php'';
for (var p in myObj) {
if (myObj.hasOwnProperty(p)) {
param += encodeURIComponent(p) + "=" + encodeURIComponent(myObj[p]) + "&";
}
}
window.location.href = url + "?" + param;