在不知道JavaScript对象的键的情况下,我如何将…
var obj = {
param1: 'something',
param2: 'somethingelse',
param3: 'another'
}
obj[param4] = 'yetanother';
…到…
var str = 'param1=something¶m2=somethingelse¶m3=another¶m4=yetanother';
...?
在不知道JavaScript对象的键的情况下,我如何将…
var obj = {
param1: 'something',
param2: 'somethingelse',
param3: 'another'
}
obj[param4] = 'yetanother';
…到…
var str = 'param1=something¶m2=somethingelse¶m3=another¶m4=yetanother';
...?
当前回答
该方法使用递归进入对象层次结构并生成rails样式参数,rails将其解释为嵌入的散列。objtoarams生成一个带有额外&号的查询字符串,objToQuery删除最后一个&号。
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]}&`;
}else{
str += `${key}=${obj[key]}&`;
}
}
}
return str;
}
其他回答
使用Axios和无限深度:
<pre> <style> textarea { width: 80%; margin-bottom: 20px; } label { font-size: 18px; font-weight: bold; } </style> <label>URI</label> <textarea id="uri" rows="7"></textarea> <label>All Defaults (Bonus): </label> <textarea id="defaults" rows="20"></textarea> </pre> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script> 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 </script>
祝你好运…
ES6的一个快速回答:
const paramsObject = {
foo: "bar",
biz: "baz"
}
const params = Object.entries(paramsObject)
.map(([k, v]) => `${k}=${v}`)
.join('&');
// Output: foo=bar&biz=baz
在一层深处…
var serialiseObject = function(obj) {
var pairs = [];
for (var prop in obj) {
if (!obj.hasOwnProperty(prop)) {
continue;
}
pairs.push(prop + '=' + obj[prop]);
}
return pairs.join('&');
}
jsFiddle。
有关于任意深度对象的递归函数的讨论……
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('&');
}
jsFiddle。
这当然意味着在序列化中丢失了嵌套上下文。
如果这些值不是一开始就编码的URL,并且您打算在URL中使用它们,请检查JavaScript的encodeURIComponent()。
一行没有依赖项:
new URLSearchParams(obj).toString();
// OUT: param1=something¶m2=somethingelse¶m3=another¶m4=yetanother
使用它的URL内置如下:
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);
[编辑2020年4月4日]:空值将被解释为字符串'null'。
[编辑2022年3月9日]:浏览器兼容性
功能性方法。
var kvToParam = R.mapObjIndexed((val, key) => { 返回'&' + key + '=' + encodeURIComponent(val); }); var objToParams = R.compose( R.replace (/^&/, '?'), R.join(”), R.values, kvToParam ); 变量o = { 用户名:“sloughfeg9', 密码:澳大利亚 }; console.log (objToParams(的); < script src = " https://cdnjs.cloudflare.com/ajax/libs/ramda/0.22.1/ramda.min.js " > < / >脚本