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

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

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

Answer 2

作为 Nodejs 和 React 开发的初学者，这是我的问题。花了几天后，我意识到 qs 库做得很好。

您需要导入它

import qs from "qs";

然后在我的案例中在客户端应用程序中使用 React:

query = {
   find:{
      sec1:"hi",
      sec2:"there",
   }, 
   limit:12,
   sort:{sec1:-1},
};
const qsg = qs.stringify(query); 
const res = await axios.get(`/api/data?${qsg}`);
console.log("Data from server:", res.data);

在 Nodejs 应用程序中：

const sendData = asyncHandler(async (req, res) => {
console.log("req.query:", req.query);
const {find, sort, limit, ...rest} = req.query
//optimize the query or deconstruct the request

//run the query in my case Mongoose:
const data = await dataModel
.find(find)
.sort(sort)
.limit(limit);

if (data) {
   res.json(data);
} else {
   res.status(404).json({ message: "data not found" });
   res.status(404);
   throw new Error("Data not found");
}

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

How to generate query string from a nested object

javascript

url

query-string

reactjs