想要将嵌套对象转换为附加到 url 的查询参数答案

【问题标题】：Want to convert a nested object to query parameter for attaching to url想要将嵌套对象转换为附加到 url 的查询参数
【发布时间】：2019-05-16 17:33:39
【问题描述】：

您好，我需要使用查询参数构造 url 请求，我有一个带有键和值的嵌套对象，如下所示

 "user": {
    "first_name": "Srini",
    "last_name": "Raman",
     "gender": "male",
     "dob": "1992-08-02",
     "address_attributes": {
      "city": "San Diego",
      "state": "CA",
      "zip": 92127,
      "country": "USA",
      "latitude": 37.257009,
      "longitude": -120.050767
    }
}

我需要得到一个查询参数，比如

user[first_name]=Srini&user[last_name]=Raman&user[address_attributes][city]=San Diego&user[address_attributes][state]=CA

【问题讨论】：

你尝试了什么？
我尝试使用npmjs.com/package/query-string queryString.stringify(data) 但结果类似于 ``` user_firstname=Srini&user_address=%5Bobject%20Object%5D ```
为什么不使用 Axios 来为你处理 URL 编码。
Axios 可以创建像 user[address_attributes][city]=San Diego&user[first_name]=Srini 这样的 url 参数，我会尝试更新你
试过 Axios 但是当我传递用户选项 url 之前没有更正它没有编码 /api/v1/users?[object Object]

标签： javascript query-string

【解决方案1】：

let obj = {
  user: {
    first_name: 'Srini',
    last_name: 'Raman',
    gender: 'male',
    dob: '1992-08-02',
    address_attributes: {
      city: 'San Diego',
      state: 'CA',
      zip: 92127,
      country: 'USA',
      latitude: 37.257009,
      longitude: -120.050767
    }
  }
};

let getPairs = (obj, keys = []) =>
  Object.entries(obj).reduce((pairs, [key, value]) => {
    if (typeof value === 'object')
      pairs.push(...getPairs(value, [...keys, key]));
    else
      pairs.push([[...keys, key], value]);
    return pairs;
  }, []);

let x = getPairs(obj)
  .map(([[key0, ...keysRest], value]) =>
    `${key0}${keysRest.map(a => `[${a}]`).join('')}=${value}`)
  .join('&');
console.log(x);

【讨论】：

【解决方案2】：

如果有人需要，这里有一个 TypeScript 实现。


const testObject = {
  "user": {
    "first_name": "Srini",
    "last_name": "Raman",
    "gender": "male",
    "dob": "1992-08-02",
    "address_attributes": {
      "city": "San Diego",
      "state": "CA",
      "zip": 92127,
      "country": "USA",
      "latitude": 37.257009,
      "longitude": -120.050767
    }
  }
}

interface ObjectToQueryStringHelperObject {
  keyPath: Array<string>;
  value: boolean | number | string;
}

function objectToQueryStringHelper(
  object: any,
  path: Array<string> = [],
  result: Array<ObjectToQueryStringHelperObject> = []
): Array<ObjectToQueryStringHelperObject> {
  return Object.entries(object).reduce((acc, [key, value]) => {
    if (!_.isNil(value) || !_.isEmpty(value)) {
      _.isObject(value) ?
        acc.push(...objectToQueryStringHelper(value, [...path, key], result)) :
        acc.push({ keyPath: [...path, key], value });
    }
    return acc;
  }, []);
}

export function objectToQueryString(object: any): string {
  const simplifiedData = objectToQueryStringHelper(object);
  const queryStrings = simplifiedData.map(({ keyPath: [firstKey, ...otherKeys], value }) => {
    const nestedPath = otherKeys.map(key => `[${key}]`).join('');
    return `${firstKey}${nestedPath}=${!_.isNil(value) ? encodeURI(`${value}`) : ''}`
  })
  return queryStrings.join('&');
}

console.log(objectToQueryString(testObject))

【讨论】：

【解决方案3】：

您可以使用 qs ：https://npmjs.com/package/qs

他的 stringify 方法似乎完全符合您的要求。

【讨论】：

请在您的回答中添加来自上述网站的更多信息。否则它是一个“仅限链接”的答案，可能会被社区删除。
虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review