如何从嵌套对象生成查询字符串

Question

我想为我的高级过滤器生成一个查询字符串。我的对象如下所示：

{
   searchValue: {
     firstName: "John",
     lastName: "Doe",
     postalCode: "3130",
     city: "New York"
   },
    page: 1
 }

我正在使用查询字符串库来尝试格式化我想要的字符串。

export function updateAdvancedSearchQueryString<T>(props: RouteComponentProps, newValues: T) {
  props.history.push({
    pathname: props.location.pathname,
    search: queryString.stringify(newValues)
  });
}

我想要实现的输出：

/trainers?page=1&searchValue=firstName=John&lastName=Doe&postalCode=3130&city=New_York

我目前得到的输出：

/trainers?page=1&searchValue=%5Bobject%20Object%5D

如何从嵌套对象生成所需的查询字符串？

Answer 1

您可以有多个嵌套级别，因此您应该递归地进行嵌套。

这样的事情应该没问题

const data = {
  searchValue: {
    firstName: "John",
    middleInitial: null,
    lastName: "Doe",
    postalCode: "3130",
    city: "New York"
  },
  page: 1
}

const createQueryString = (data) => {
  return Object.keys(data).map(key => {
    let val = data[key]
    if (val !== null && typeof val === 'object') val = createQueryString(val)
    return `${key}=${encodeURIComponent(`${val}`.replace(/\s/g, '_'))}`
  }).join('&')
}

console.log(createQueryString(data))

但是你必须考虑在你传递一些带有函数的对象作为它的值之一的情况下，你将如何处理这样的数组。但基本思想很简单：如果您找到对象作为值，请使用相同的函数将其转换为查询字符串