Javascript Convert an Object to a 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

Are category and brand really object values and not Arrays? It's unusual to have numeric property keys in object values. — Dai
– Dai, Commented Nov 29, 2021 at 8:21
https://api.websiteurl.com/products&category=1,2&brand=1 <-- This is an invalid URI, you're missing the querystring ? character. — Dai
– Dai, Commented Nov 29, 2021 at 8:21
I know, I wanted to let everyone know what I am using and If we can produce a more readable and easy solution then it would be best — Fahad Sohail
– Fahad Sohail, Commented Nov 29, 2021 at 8:21
@Dai yes it's a redux object where keys represent the ids. I update it using something like this: {...state.filters, [action.id]: [action.name]} — Fahad Sohail
– Fahad Sohail, Commented Nov 29, 2021 at 8:37

DecPK · Accepted Answer · 2021-11-29 10:00:23Z

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

edited Nov 29, 2021 at 10:00

answered Nov 29, 2021 at 8:21

DecPK

25.4k6 gold badges32 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Dai Over a year ago

Don't forget to encode the querystring parameters, otherwise a value with = or & in it will break everything.

Salman Arshad Over a year ago

Ideally you should encodeURIComponent the values although in this example they are just numbers.

Dai Over a year ago

Also your code is also missing the ? character.

Dai Over a year ago

Your code doesn't include filters.brand btw.

Dai Over a year ago

You're using encodeURIComponent incorrectly. You need to use encodeURIComponent to encode each querystring name and value separately. But you shouldn't need to use encodeURIComponent if you use URLSearchParams instead.

|

Himanshu Singh · Accepted Answer · 2021-11-29 08:23:44Z

0

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)

answered Nov 29, 2021 at 8:23

Himanshu Singh

1,9738 silver badges20 bronze badges

Comments

Lin Du · Accepted Answer · 2021-11-29 08:34:08Z

0

I will use qs package to stringify the data to URL query parameters. But first, we need to convert the data like below:

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

The encoding can be disabled by setting the encode option to false.

E.g.

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"

RunKit

edited Nov 29, 2021 at 8:34

answered Nov 29, 2021 at 8:28

Lin Du

104k138 gold badges340 silver badges575 bronze badges

1 Comment

Dai Over a year ago

What does qs do that the built-in URLSearchParams object doesn't? I don't think we should be perpetuating the JS package mess situation we're in right now: in-box solutions should be preferred imo.

Pradip Dhakal · Accepted Answer · 2021-11-29 08:46:55Z

0

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)

edited Nov 29, 2021 at 8:46

answered Nov 29, 2021 at 8:31

Pradip Dhakal

1,9821 gold badge15 silver badges31 bronze badges

4 Comments

Dai Over a year ago

You aren't URI-encoding parameter names and values. You're missing the ? separator.

Pradip Dhakal Over a year ago

added ? operator.

Pradip Dhakal Over a year ago

Thank you @Dai. Added URI-encoding as well.

Dai Over a year ago

You're using encodeURIComponent incorrectly.

Collectives™ on Stack Overflow

Javascript Convert an Object to a URL

4 Answers 4

9 Comments

Comments

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

9 Comments

Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related