Javascript 将 Object 转换为 URL

Question

I have an object which looks something like this:

activeFilters: {
    category: {
        '1': 'View All',
        '2': ' Flats'
    },
    brand: {
        '1': 'Fits'
    }
}

I want to map through the object and use these as URL parameters. The end result will look something like this:

https://api.websiteurl.com/products?category=1,2&brand=1

I am using react and I can use lodash. Wanted help on whats the best way to achieve this

Answer 1

You can make use of Object.entries and map to achieve the desired result

 const filters = { activeFilters: { category: { "1": "View All", "2": " Flats", }, brand: { "1": "Fits", }, }, }; const path = Object.entries(filters.activeFilters).map(([k, v]) => `${k}=${Object.keys(v)}`).join("&"); const url = "https://api.websiteurl.com/products"; const result = `${url}?${path}`; console.log(result);

Answer 2

I would do like this:

 const objectToParams = (object) => { if (object && Object.keys(object).length > 0) { const resultArr = []; Object.keys(object).map((key) => { const keys = Object.keys(object[key]).join(","); resultArr.push(`${key}=${keys}`); }); return resultArr.join("&"); } }; const activeFilters = { category: { '1': 'View All', '2': ' Flats' }, brand: { '1': 'Fits' } } const url = `https:google.com/products?`; const result = `${url}${encodeURIComponent(objectToParams(activeFilters))}`; console.log("url is: ", result)

Answer 3

 const activeFilters = {category: {'1': 'View All','2': ' Flats'},brand: {'1': 'Fits'}} const queryParams = Object.entries(activeFilters).map((query) => { //Join all query keys values with ',' const values = Object.keys(query[1]).map((val) => val).join(','); //add these values to name of the query return query[0]+'='+values; }).join('&'); //join final result with '&' console.log(queryParams) url = 'https://google.com?'+queryParams; console.log(url)

Answer 4

I will use qs package to stringify the data to url query parameters. But first, we need to convert the data.

Eg

var qs = require("qs")

const activeFilters =  {
    category: {
        '1': 'View All',
        '2': ' Flats'
    },
    brand: {
        '1': 'Fits'
    }
}

const r = Object.keys(activeFilters).reduce((acc, cur) => {
  acc[cur] = Object.keys(activeFilters[cur]);
  return acc;
}, {})

const search = qs.stringify(r, {arrayFormat: 'comma', encode: false})
console.log(search)
console.log(`https://api.websiteurl.com/products?${search}`)

RunKit

Answer 5

Use the URL object:

 const filters = { activeFilters: { category: { "1": "View All", "2": "Flats" }, brand: { "1": "Fits" } } }; let u = new URL("https://api.websiteurl.com/products"); Object.entries(filters.activeFilters).forEach(function([key, value]) { u.searchParams.append(key, Object.keys(value).join(",")); }); console.log(u.href);

The , should be encoded as %2C according to the specs .