从 URLSearchParams 获取对象数组

Question

我需要从 URL 字符串中提取 filter，它是一个对象数组：

http://localhost:3006/menus?page=1&filter[0][id]=MenuID&filter[0][value]=2&filter[1][id]=ParentMenuName&filter[1][value]=u.

这是我目前拥有的：

  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const filterParamsValue = searchParams.getAll('filter'); // returns []

这是我想从filter得到的：

[ { id: 'MenuID', value: '2' }, { id: 'ParentMenuName', value: 'u' } ]

Answer 1

一些快速运行 :D ...

let s = `http://localhost:3006/menus?page=1&filter[0][id]=MenuID&filter[0][value]=2&filter[1][id]=ParentMenuName&filter[1][value]=u`

// get just array of strings like ['filter[0][id]=MenuID', ...]
let arr = s.split(/\&/).slice(1)
let filters = {}

arr.forEach(f => {
    const id = f.match(/\[([\d]+)\]/)[1]
    const prop = f.match(/\[([a-z]+)\]/)[1]

    if(filters[id]) {
        filters[id][prop] = f.match(/=([\w]+)/)[1]
    } else {
        filters[id] = {}
        filters[id][prop] = f.match(/=([\w]+)/)[1]
    }
})


// show filters object:
console.dir( filters )

/*

  { 
    0: { id: "MenuID", value: "2"},
    1: { id: "ParentMenuName", value: "u"}
  }

*/

---

这为您提供了过滤器对象。 如果需要数组，可以将其转换为：

/**
 * get object of filters and make an array of filters 
 */
const arrayOfFilters = []

for(key in filters) {
    arrayOfFilters.push(filters[key])
}

console.log(arrayOfFilters)

Answer 2

我编写了一个原型函数来解析方括号中的对象数组。 这个函数是动态解析括号，对嵌套对象有好处

URLSearchParams.prototype.toObject = function () {
    let _obj = {};
    const bracketToDots = function (str) {
        return str.replaceAll('[', '.').replaceAll(']', '')
    }
    const parseDotNotation = function (str, val, obj) {
        let currentObj = obj,
            keys = str.split("."),
            i, l = Math.max(1, keys.length - 1),
            key;

        if (l === 1) {
            key = keys[0];
            currentObj[key] = val;
        } else {
            for (i = 0; i < l; ++i) {
                key = keys[i];
                currentObj[key] = currentObj[key] || {};
                currentObj = currentObj[key];
            }

            currentObj[keys[i]] = val;
        }
    }
    for (const [key, value] of this.entries()) {
        parseDotNotation(bracketToDots(key), value, _obj);
    }
    return _obj;
}

const lo = new URL('http://localhost:3006/menus?page=1&filter[0][id]=MenuID&filter[0][value]=2&filter[1][id]=ParentMenuName&filter[1][value]=u');
const searchParams = new URLSearchParams(lo.search);
const params = searchParams.toObject();

console.log(params['filter'])

结果：

{
  "0": {
    "id": "MenuID",
    "value": "2"
  },
  "1": {
    "id": "ParentMenuName",
    "value": "u"
  }
}