In react, how to pass an array of object as a query string to the endpoint url?

Question

I am working on a react app and need to build the the query string dynamically and append it to the url. The reason being is because I have a base endpoint which is same for all the links. However for some links, the api expects 2 parameters while for some it only requires 1 parameter. Depending on the link that you click, the page displays different data.

For example, I have the following 4 links on the page. Comments | View All Sequences | Review | Summary

Comments link: requires 2 parameters (dstrNr and rgsnId)
View All Sequences: requires only 1 parameter (dstrNr)
Review: requires only 1 parameter (dstrNr)
Summary: requires 2 parameters (dstrNr and rgsnId)

If I have a base url defined, how can I use the same api action and append the parameter list as an array of object to the url?

I tried the following by passing the object data as a parameter but it also send undefined object key/value pair to the endpoint as well which I don't want:

var str = [];
    for (var data in obj)
      if (obj.hasOwnProperty(data)) {
        str.push(encodeURIComponent(data) + "=" + encodeURIComponent(obj[data]));
      }
      console.log("ENDPOINT" + str.join("&"))

Any help would be appreciated.

yondu_udanta · Accepted Answer · 2021-06-17 19:20:41Z

4

You can use querystring's stringify function instead of a custom function that exactly does what you are looking for.

querystring.stringify({ foo: 'bar', baz: ['qux', 'quux'], corge: '' });
// Returns 'foo=bar&baz=qux&baz=quux&corge='

https://nodejs.org/api/querystring.html#querystring_querystring_stringify_obj_sep_eq_options

In your react app, import querystring(you don't need to add a dependency as it's a Node.js's built-in module)

import querystring from 'querystring'

const url = `http://myapp.com?${querystring.stringify(queryParamsObj)}`

answered Jun 17, 2021 at 19:20

yondu_udanta

8071 gold badge7 silver badges15 bronze badges

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

1 Comment

Shaun Over a year ago

Worked like a charm. Thank you so much.

Collectives™ on Stack Overflow

In react, how to pass an array of object as a query string to the endpoint url?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related