Estoy creando una funcionalidad de filtrado y me gustaría agregar los filtros seleccionados a la URL para fines de navegación. Aquí hay una serie de objetos:
let arr = [ {available:true}, {variantOption:{name:"size",value:"2XL"}}, {productType:"Apparel"} ]Lo necesito en el siguiente formato que creo que está de acuerdo con las pautas de W3c:
www.whatever.com/collection?disponible=true&productType=apparel&somethingElse=algo, etc.
No puedo averiguar cómo agregar algo como la clave variantOption y los valores a la URL en un formato como este. Entonces, cuando recupero los valores de la URL, terminan en el mismo formato que tenía la matriz original de objetos, que quiero usar para la llamada a la API.
Estaría usando window.history.pushState para este caso de uso aquí.
Deberá recorrer la matriz.
for (let item of arr) {
luego deberá obtener cada clave del objeto (elemento).
for (let key in item)
porque uno de ellos es otro objeto, deberá verificar si el valor es objeto
if (typeof item[key] === "object")
si es verdad,
debe repetir una vez más para obtener los pares de valores clave adicionales y pasarlos a la URL como parámetros.
for (let innerKey in item[key]) {
newLink.searchParams.set(innerKey, item[key][innerKey]);
más,
simplemente tome la clave y el valor y páselos a la url como parámetros.
newLink.searchParams.set(key, item[key]);
el bucle al final debería verse así:
const newLink = new URL(window.location.href); // here you can put any base url for (let item of arr) { for (let key in item) { if (typeof item[key] === "object") { for (let innerKey in item[key]) { newLink.searchParams.set(innerKey, item[key][innerKey]); } } else { newLink.searchParams.set(key, item[key]); } } } y luego usar newLink.href como la url. mencionaste que quieres usar window.history.pushState . para que pueda llamar a la función y pasar la url como argumento.
ejemplo aquí: ejemplo de codesandbox