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

Question

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

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

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

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))

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