Как сформировать объект типа urlSearchParams из разрешенных utm меток?

Question

[Марат Иванов]

Всем привет! есть отслеживаемые utm метки из них надо выбрать только разрешенные, они в массиве, и сформировать объект для отправки посредством axios.post в params.

import { UtmType } from 'app/enums';
// массив разрешенных меток
const utmConst: Array<string> = [
  UtmType.UtmSource,
  UtmType.UtmMedium,
];

//сбор с  url строки параметров
const utmInUrl: Array<string> = window.location.search.substring(1).split('&');
// фильтрация
const allowedValuesUtmParams: Array<string> = utmInUrl.filter(item => {
  const [name]: Array<string> = item.split('=');
  return utmConst.includes(name);
});
//далее требуется собрать обьект типа params для axios.post
let utm = '';
if (allowedValuesUtmParams.length) {
  utm = allowedValuesUtmParams.join('&');
}
// нижняя строка не  поддерживается проектом
const searchParams = new URLSearchParams(utm);

  public async colbasnjaNaServer( ){
    const url = `${this.app}/cruto/danuna}`;
    const <b>params</b> = searchParams
    return await this.request(
      url,
      {
        method: 'POST',
        body: JSON.stringify({

        }),
        <b>params</b>
      }
    );
  }
Спасибо!   основная задача заменить реализацию через URLSearchParams

Comments

[Александр]

Что значит, "не поддерживается проектом"?

[Марат Иванов]

Александр, там IE , и URLSearchParams не отрабатывает.

Answer 1

[Александр]

Playground. Мы не можем использовать Array.find, так как он не поддерживается в IE.

Код

type URLParamsEntry = [string, string];

class URLParams {
    entries: URLParamsEntry[] = [];

    constructor(search: string = '') {
        const trimmedSearch = search.trim();
        if (trimmedSearch.length > 0) {
            const pairs = trimmedSearch.replace(/^\?/, '').split('&');
            for (const entry of pairs) {
                const pair = entry.split('=');
                if (pair[0] !== undefined && pair[1] !== undefined) {
                    const key = pair[0];
                    const value = decodeURIComponent(pair[1]);

                    this.entries.push([key, value]);
                }
            }
        }
    }

    append(key: string, value: string) {
        this.entries.push([key, value]);
        
        return this;
    }

    delete(key: string) {
        this.entries = this.entries.filter(entry => entry[0] !== key);

        return this;
    }

    has(key: string) {
        const inEntries = this.entries.some(entry => entry[0] === key);

        return inEntries;
    }

    set(key: string, value: string) {
        return this.delete(key).append(key, value);
    }

    get(key: string): string | null {
        const entries = this.getAll(key);

        return entries.length > 0 ? entries[0] : null;
    }

    getAll(key: string): string[] {
        const entries = this.entries.reduce<string[]>((accumulator, entry) => {
            if (entry[0] === key) {
                accumulator.push(entry[1]);
            }
            return accumulator;
        }, []);

        return entries;
    }
    
    toString() {
        return this.entries
            .map(entry => `${entry[0]}=${encodeURIComponent(entry[1])}`)
            .join('&');
    }
}

Comments

[Марат Иванов]

Абалдеть! Спасибо!

[Александр]

Марат Иванов, Даже обновил, нашел небольшой косяк.