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

2023-12-27

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

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

我正在使用请求参数 https://nodejs.org/api/querystring.html库来尝试格式化我想要的字符串。

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

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


您可以有很多级别的嵌套,因此您应该递归地进行。

像这样的东西应该没问题

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

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何从嵌套对象生成查询字符串 的相关文章

  • Pug 从模板内的另一个文件调用 js 函数

    我花了将近四个小时都无法解决这个问题 而且我找不到任何针对此类问题的有用文档 这就是问题 我正在使用 pug jade 模板 我想调用 pug 模板内的函数来转换一些数据 这是主要模板 main template section each
  • 网络上的等角柱状图

    我计划为游戏的标记 图钉 构建在线地图 但我无法设置标记的正确纬度 原始地图是一个2048 2048px 的正方形 然后我得到了标记 数千个 地图坐标使用 0 到 100 之间的 x y 表示法设置 0 0 是top left角和100 1
  • 为什么 Promise `.then` 方法的回调是反模式

    我在 StackOverflow 上看到了答案 人们建议为 AngularJS 服务提供回调函数 app controller tokenCtrl function scope tokenService tokenService getTo
  • 从 puppeteer PDF 中删除分页符?

    我目前正在尝试查看是否有一种方法可以删除我的 puppeteer PDF 中的分页符 因为我当前的 PDF 设置中的一些分页符正在以一种奇怪的方式切断文本 我正在谈论的内容的屏幕截图 我的傀儡代码 app get companyId pdf
  • ASP.NET 验证控件和 Javascript 确认框

    我有一个使用 NET 服务器端输入验证控件的页面 此页面还有一个 javascript 确认框 在提交表单时会触发该确认框 当前 当选择 提交 按钮时 会出现 javascript 确认框 一旦确认 就会触发 ASP NET 服务器端验证控
  • 如何使用 Nextjs/React 将 JSON 对象导出到 Excel?

    我有一个检索 json 对象的端点 如下所示 data id 1 temaIndicador Indian codigo 001 observaciones Interactions Specialist tertiary Regional
  • 指定 HTML5 输入类型 = 日期的值输出?

    我想将本机日期选择器添加到我的应用程序中 该应用程序当前使用遗留的本地系统 日期输入支持尚未广泛普及 但如果我可以基于兼容性提供这两种实现 那就太理想了 有没有办法指定 HTML 日期选择器给出的值的输出 歌剧的默认设置是yyyy mm d
  • 仅从功能区打开一个对话框

    我有一个带有登录按钮的功能区 可打开登录对话框 我想将对话框的数量限制为一个 我正在使用函数 displayDialogAsync startAddress options callback https learn microsoft co
  • 如何在单击按钮时清除反应挂钩中的间隔

    我正在用反应钩子构建一个简单的计时器 我有两个按钮启动和重置 当我单击开始按钮时 handleStart 函数工作正常 计时器启动 但我不知道如何在单击重置按钮时重置计时器 这是我的代码 const App gt const timer s
  • 公开闭包内的方法

    当我们在闭包内创建一个方法时 该方法将成为该闭包的私有方法 并且在我们以某种方式公开它之前无法访问它 怎么可能暴露呢 您可以返回对它的引用 var a function var b function I m private alert go
  • 如何将React JS状态保存到本地存储中

    我不知道如何将 React js 状态存储到本地存储中 import React Component from react import App css import auth createUserProfileDocument from
  • 将默认搜索文本添加到搜索框 html

    我正在努力将 搜索 文本添加到搜索框 我正在努力实现 onfocus 消失文本 And onblur 重新出现文本 到目前为止 我已经实现了这一点 但我必须将其硬编码为 html eg
  • 如何禁用网页中的萤火虫?

    如何使用 Javascript 禁用 firebug 我想这样做是为了向访问者隐藏我的网页的运作方式 有什么选择可以做到这一点吗 你不能 你能做的最好的事情就是混淆你的 JavaScript 实际上刮掉了 您能做的最好的事情就是将所有安全关
  • WebpackError:ReferenceError:Gatsby 上未定义窗口

    我已经在互联网上进行了大量搜索 但无法解决这个问题 我正在使用 Gasby 开发静态页面 但遇到此错误 WebpackError ReferenceError window is not defined 我的线索是 这与我正在使用的引导 模
  • Firebase 身份验证和实时应用程序数据库如何保护自身安全?

    从一般开发的角度来看 我很好奇如何保护在线资源的访问 我们使用以下 Firebase 配置参数初始化 Web 应用程序 apikey authdomain projectid databaseurl messagesenderid 服务器如
  • 获取类中的所有静态 getter

    假设我有这个类 我像枚举一样使用它 class Color static get Red return 0 static get Black return 1 有没有类似的东西Object keys to get Red Black 我使用
  • eventSources 到事件 Json,完整日历

    我正在尝试从 eventSources 获取 json 调用到我的事件 我在 eventSources 中返回的 json 是 title Title Test start 1305841052 当我将此字符串传递到事件中时 它会正确显示日
  • 测试 jQueryUI 是否已加载

    我正在尝试调试网站 并且我认为 jQueryUI 可能未正确加载 如何测试 jQueryUI 是否已加载 if jQuery ui UI loaded OR if typeof jQuery ui undefined UI loaded 应
  • 有序 JSON 对象

    我有一个 servlet 它与数据库通信 然后返回有序 按时间排序 对象的列表 在servlet部分 我有 access DB returns a list of User objects ordered ArrayList users M
  • 拉斐尔路径交叉点不起作用

    我对拉斐尔和 pathIntersection method JSFiddle 示例 http jsfiddle net t6gWt 2 您可以看到有两条线都与曲线相交 但当我使用 pathIntersection method 有一个未解

随机推荐

  • Postgres 数据库已锁定:查询永远运行

    我的一个 python 脚本在 Postgres 数据库上运行了一些 ALTER TABLE 查询 发生了一些问题 桌子被锁了 当我对这些表中的任何一个运行任何查询时 它告诉我查询正在运行 但什么也没有发生 目前 我只能通过关闭系统并重新启
  • iOS 5.0 用户代理字符串是什么?

    是什么iOS 5 0用户代理字符串 这里是iOS 4 0用户代理 iPhone 4 用户代理是什么 https stackoverflow com q 3105555 836407 iPhone Mozilla 5 0 iPhone CPU
  • KIF 输出:AX Exchange 错误:错误域=辅助功能代码=0“远程服务不响应 _accessibilityMachPort”

    在使用 iOS 8 1 3 的设备上运行 KIF 集成测试时 我收到大量以下类型的诊断消息作为控制台输出 AX Exchange 错误 错误域 辅助功能代码 0 远程服务 不响应 accessibilityMachPort UserInfo
  • 将文件读入数组 - Java

    我正在练习java 并在网上查看练习 然而 我陷入了我需要的地步 Read the file again and initialise the elements of the array Task 将表示成员列表的类 Members 编写为
  • file_exists() 的 PHP 不区分大小写版本

    我试图想出在 PHP 中实现不区分大小写的 file exists 函数的最快方法 我最好的选择是枚举目录中的文件并进行 strtolower 与 strtolower 比较 直到找到匹配项 我使用评论中的源代码来创建这个函数 如果找到则返
  • Firebase Auth UI 的电子邮件验证

    我在用firebase auth UI FirebaseUI Android https github com firebase FirebaseUI Android blob master auth README md 在 Android
  • django 迁移 - 具有多个开发分支的工作流程

    我很好奇其他 django 开发人员如何通过迁移来管理多个代码分支 例如在 git 中 我的问题如下 我们在 git 中有多个功能分支 其中一些带有 django 迁移 其中一些更改字段 或完全删除它们 当我切换分支时 git checko
  • 将 jQuery 与 SQL Server 数据库连接

    我正在尝试构建一个 jQuery 功能 其场景如下所示 假设用户单击网站中的图像 页面上会弹出一个 jQuery 对话框 该对话框有一个文本字段 用于输入图像的 替代文本 当用户单击提交按钮时 该页面的文本应与图像的 URL 一起保存到我的
  • Hive 日期/时间戳列

    我在 HDFS 上有一些数据 我正在尝试将其设置为通过 hive 进行查询 数据采用逗号分隔文本文件的形式 文件中的一列是日期 时间列 如下所示 Wed Aug 29 16 16 58 CDT 2018 当我尝试读取使用以下脚本创建的 Hi
  • Auth 过滤器重定向回 Laravel 中的原始 POST 请求

    看来 Redirect guest login 只适用于 GET 请求 IE 它会将经过身份验证的用户重定向到原始预期 URL GET 在存在 POST 请求的情况下 是否有办法让身份验证过滤器在用户成功登录后继续 POST 到 URL 一
  • 如何避免 Linux/X11 上的 pygame 撕裂

    我一直在玩 pygame 在 Debian Lenny 上 它似乎工作得很好 除了烦人的位图撕裂 全屏或窗口模式 我正在使用默认的 SDL X11 驱动程序 谷歌搜索表明 X11 不提供垂直同步功能 这是 SDL 的一个已知问题 即使使用使
  • 两个相似的位姿具有较大的相对欧拉角

    欧拉角表示的相似位姿有两种 s euler angle o1 0 000549608 3 1334 1 23193 s euler angle o2 0 0222646 3 10948 1 31032 但 Eigen 计算出的相对欧拉角为
  • datagridview 虚拟模式,更新 RowCount 会导致 CellValueNeeded 为所有行触发

    我正在尝试实现 datagridview 的虚拟模式 但是当我将 RowCount 设置为某个数字 以显示滚动条 时 网格希望同时拥有所有行 而不仅仅是显示的行 DataGridView grid new grid VirtualMode
  • Matlab 周末提取

    我有一个大小为 364 x 5 的矩阵 timeVectorDaily 该矩阵具有十进制天数形式的数据 例如 734870 734870 2 734870 4 734870 6 734870 8 734871 734871 2 734871
  • 同时按下按键

    我可以知道在Javascript中同时按下的键的数量吗 如果是这样 我怎样才能拥有他们的数组keyCode 您可以监听 keydown 和 keyup 事件 var keys length 0 document onkeydown func
  • 使用 Python/bokeh 在网站中嵌入绘图

    我试图在个人网站中静态嵌入散景图 但遇到了一些我不理解的行为 基本上 我使用散景生成一个绘图 如下所示 import bokeh plotting as bplt import numpy as np x np random random
  • 如何将二维数组传递到 pycuda 的内核中?

    我找到了答案here https stackoverflow com questions 13282596 how do i feed a 2 dimensional array into a kernel with pycuda 但尚不清
  • 四舍五入到最接近的 100

    如何将整数四舍五入到最接近的 100 例如 497 将四舍五入为 500 98 将四舍五入为 100 1423 将四舍五入为 1400 我会除以 100 四舍五入 然后再次相乘 int initial int rounded int Mat
  • WPF 画布 VisibilityChanged 事件

    我想设置一个事件来运行Visibility在 WPF 上更改Canvas控制 canvas1 VisibleChanged new EventHandler canvas1 VisibleChanged 我已经尝试了上面的方法 但不起作用
  • 如何从嵌套对象生成查询字符串

    我想为我的高级过滤器生成一个查询字符串 我的对象如下所示 searchValue firstName John lastName Doe postalCode 3130 city New York page 1 我正在使用请求参数 http