2020-04-01-building-rails-compatible-query-strings-in-javascript

栏目: IT技术 · 发布时间: 5年前

内容简介:TheWhat itI don't even remember where this comes from, I've written it for so many different projects I just copy it from the last one.
layout title date categories tags

post

Building Rails-compatible Query Strings in JavaScript

2020-04-01T13:57

javascript

query-string

javascript

functions

missing-libraries

rails

The MDN defines the URLSearchParams to help build query strings based on objects.

What it doesn't do, however, is build a Rails-compatible query string from a nested object, i.e., an object with properties that other objects, i.e. Object, Array, etc. This won't do anything if the parent object has a function property, but it's a pretty good implementation.

I don't even remember where this comes from, I've written it for so many different projects I just copy it from the last one.

The problem is that when given a params object like:

let params = {
    a: 27,
    b: "forty-two",
    c: [1, 2, 3, 5],
    d: { id: 2887, name: "Gillian" }
}

Passing this into URLSearchParams doesn't give a query string that Rails finds useful in parsing parameters up in the controller:

let qa = new URLSearchParams(params).toString()

yields: a=27&b=forty-two&c=1,2,3,5&d=d=%5Bobject+Object%5D which is really no good to Rails (doubt it would be good for express either, but that's not what this one's about).

So we need something a bit more on point:

function serializeObjectToRailsQueryString(params, prefix) {
  const query = Object.keys(params).map(key => {
     const value = params[key]

     if (params.constructor === Array) key = `${prefix}[]`
     else if (params.constructor === Object)
       key = prefix ? `${prefix}[${key}]` : key

     if (typeof value === "object")
       return serializeObjectToQueryString(value, key)
     else return `${key}=${encodeURIComponent(value)}`
   })

   return [].concat.apply([], query).join("&")
}

Passing that same params object above, yields the following:

"a=27&b=forty-two&c[]=1&c[]=2&c[]=3&c[]=5&d[id]=2887&d[name]=Gillian"

When the controller params method is called, it yields a AC::Parameters object of:

{
  a: 27,
  b: "forty-two",
  c: [1, 2, 3, 5],
  d: { id: 2887, name: "Gillian"}
}

just as we'd expect.


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Web 2.0 Architectures

Web 2.0 Architectures

Duane Nickull、Dion Hinchcliffe、James Governor / O'Reilly / 2009 / USD 34.99

The "Web 2.0" phenomena has become more pervasive than ever before. It is impacting the very fabric of our society and presents opportunities for those with knowledge. The individuals who understand t......一起来看看 《Web 2.0 Architectures》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

URL 编码/解码
URL 编码/解码

URL 编码/解码

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具