將物件轉換為URL-有解無憂

我有一個看起來像這樣的物件：

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

我想映射物件并將它們用作 URL 引數。最終結果將如下所示：

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

我正在使用 react，我可以使用 lodash。需要幫助了解實作這一目標的最佳方法

uj5u.com熱心網友回復：

我會這樣做：

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)

uj5u.com熱心網友回復：

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)

uj5u.com熱心網友回復：

我將使用qs包將資料字串化為 URL 查詢引數。但首先，我們需要像下面這樣轉換資料：

qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'comma' })
// 'a=b,c'

可以通過將encode選項設定為來禁用編碼false。

例如

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"

運行套件

uj5u.com熱心網友回復：

您可以利用Object.entries并map達到預期的結果

const filters = {
  activeFilters: {
    category: {
      "1": "View All",
      "2": " Flats",
    },
    brand: {
      "1": "Fits",
    },
  },
};

const path = 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}&${path}`;
console.log(result);

uj5u.com熱心網友回復：

使用URL物件：

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);

的,應編碼為,根據的規格。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/369121.html

標籤：javascript 反应洛达什

上一篇：Vue在表單內按下回車鍵時阻止表單提交

下一篇：框中的文本突然出現而不是緩慢顯示