Tengo un objeto que se parece a esto:
activeFilters: { category: { '1': 'View All', '2': ' Flats' }, brand: { '1': 'Fits' } }Quiero mapear a través del objeto y usarlos como parámetros de URL. El resultado final será algo como esto:
https://api.websiteurl.com/products?category=1,2&brand=1
Estoy usando reaccionar y puedo usar lodash. Quería ayuda sobre cuál es la mejor manera de lograr esto
Puede utilizar Object.entries y map para lograr el resultado deseado
const filters = { activeFilters: { category: { "1": "View All", "2": " Flats", }, brand: { "1": "Fits", }, }, }; const queryString = Object.entries(filters.activeFilters) .map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(Object.keys(v))}`) .join("&"); const url = "https://api.websiteurl.com/products"; // Thanks Dai for this suggestion to encode the path. const result = `${url}?${queryString}`; console.log(result); 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)Usaré el paquete qs para clasificar los datos en parámetros de consulta de URL. Pero primero, necesitamos convertir los datos como se muestra a continuación:
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'comma' }) // 'a=b,c' La codificación se puede deshabilitar configurando la opción de encode en false .
P.ej
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) // "category=1,2&brand=1" console.log(`https://api.websiteurl.com/products?${search}`) // "https://api.websiteurl.com/products?category=1,2&brand=1"