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

【问题标题】：How to generate query string from a nested object如何从嵌套对象生成查询字符串
【发布时间】：2019-07-21 14:29:37
【问题描述】：

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

{
   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

如何从嵌套对象生成我想要的查询字符串？

【问题讨论】：

将对象转换为可预测的数组的一种方法是使用Object.keys()，然后将结果映射到您需要的任何形式。例如：Object.keys(searchValue).map(val => `key=${searchValue[key]`)，然后您可以在 & 上加入它，现在您可疑地接近查询字符串。

标签： javascript reactjs url query-string

【解决方案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))

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

【讨论】：

如果val为null，则typeof检查通过，null将成为下一次递归的数据。建议在触发递归之前添加对 null val !== null && 的检查。

【解决方案2】：

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

你需要导入它

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");
}

【讨论】：