Не удается запросить параметр массива из URL-адреса

Как найти параметр, ключ которого является массивом, используя URLSearchParams?

// Browser url:
const url = http://localhost:4000/leads?status%5B0%5D=1&page=2;

// What my code does:
const urlParams = new URLSearchParams(window.location.search);
const myParam = (urlParams.get('status%5B0%5D') || urlParams.get(key)) || "";

// Let's focus on the below myParam:
urlParams.get('status%5B0%5D') // or
urlParams.get('status[]') // or
urlParams.has('status%5B0%5D') // or
urlParams.has('status[]') // or
urlParams.getAll('status%5B0%5D') // or
urlParams.getAll('status[]')

... не имеет ничего полезного. Цель состоит в том, чтобы удалить ключ из URL-адреса. Ключи могут быть строкой status или массивом status%5B0%5D. Я пишу функцию, которая может найти ключ, будь то строка или массив. Почему все, что я делаю, не имеет никакого значения? Я что-то упускаю?

Я посмотрел на ниже, и ничего не работает:

// Copyright (c) Microsoft Corporation. All rights reserved.
// ...

interface URLSearchParams {
    /** Appends a specified key/value pair as a new search parameter. */
    append(name: string, value: string): void;
    /** Deletes the given search parameter, and its associated value, from the list of all search parameters. */
    delete(name: string): void;
    /** Returns the first value associated to the given search parameter. */
    get(name: string): string | null;
    /** Returns all the values association with a given search parameter. */
    getAll(name: string): string[];
    /** Returns a Boolean indicating if such a search parameter exists. */
    has(name: string): boolean;
    /** Sets the value associated to a given search parameter to the given value. If there were several values, delete the others. */
    set(name: string, value: string): void;
    sort(): void;
    /** Returns a string containing a query string suitable for use in a URL. Does not include the question mark. */
    toString(): string;
    forEach(callbackfn: (value: string, key: string, parent: URLSearchParams) => void, thisArg?: any): void;
}
status%5B0%5D будет status[0], чего я не вижу в вашем списке дел. urlParams.get(decodeURIComponent('status%5B0%5D')) работает для меня.
Lain 09.05.2022 09:30

Вы можете просто проверить, существует ли ключ, начинающийся с status, в .keys. Нравится [...new URLSearchParams('status%5B0%5D=1&page=2').keys()].some((key) => key.startsWith('status')).

Lain 09.05.2022 09:39

Столько вариантов, вау! Большое спасибо!

Sylar 09.05.2022 09:47
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
3
45
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Если вы можете управлять URL-адресом, вы можете написать URL-адрес следующим образом:

some-url?status=status1&status=status2&status=status3

Затем вы можете сделать .getAll('status'), который возвращает массив.

Спасибо. А если у меня нет контроля?

Sylar 09.05.2022 09:28

Ну, если у вас есть status%5B0%5D или status[], если это правда, то вы уже знаете, что это/был задуман как массив? Тогда вы можете .split(',') строку.

Fasani 09.05.2022 09:33

У меня пока нет контроля, но я проголосую, когда у меня будет контроль. Спасибо еще раз.

Sylar 09.05.2022 09:34
Ответ принят как подходящий

Похоже, вам нужно расшифровать URI перед его использованием.

var url = new URL(decodeURI('http://localhost:4000/leads?status%5B0%5D=1&page=2;'));

console.info(url.search);
// '?status[0]=1&page=2;'

console.info(url.searchParams.get('status[0]'))
// '1'

console.info(url.searchParams.getAll('status[0]'))
// ['1']

Array.from(url.searchParams.entries()).forEach( console.info )
// ['status[0]', '1']
// ['page', '2;']

Другие вопросы по теме