How to pass an array in query parameter url react

Question

I Am using multiselect dropdown, what i want is whatever i've selected in dropdown to send it to the server by calling an api which contains query param to accomodate these dropdown result. I have made an array of selected items.

Array(3) [ "contact", "fee", "inbox" ]

I want this array to get pass to below url like this:

http://localhost.com/api/influencers?status=contact&status=fee&status=inbox

With my approach i am ending up with this:

http://localhost:8080/details?status[]=contact&status[]=fee&status[]=inbox

Can anyone please help me with it

const InfluencersList = props => {
    const [availability, setAvailability] = useState(null);

    const handleAvailabilityChange = value => {
        const availability1 = value;
        setAvailability(value);
        getFilterData(availability1, null);
    };

    const getFilterData = (search, pageNumber) => {
        let params = {};
        params.status = search; //search is array [contact,

        if (pageNumber) {
            params.page = pageNumber; // no is array is number 
        }
        axios.get("/api/influencers", { params: params }).then(res => {
            setState({
                items: res.data.data
            });
        });
    };

    <ChoiceList
        title="Availability"
        titleHidden
        choices={statuses}
        selected={availability || []}
        onChange={handleAvailabilityChange}
        allowMultiple
    />
}

You said dropdown[] is coming twice, but I don't see it. Did you post the full text? From what you said, it is the right way and outcome. — Jingshao Chen
– Jingshao Chen, Commented Feb 10, 2021 at 23:33
dropdown[] is coming twice I have corrected it . My question now is: How to pass to the following URL like this: localhost.com/api/…. waiting for your reply. Thank you — Victor
– Victor, Commented Feb 11, 2021 at 0:08

Rafael Buzatto de Campos · Accepted Answer · 2021-02-11 02:20:02Z

1

you would need to use URLSearchParams to build your params with multiple query with same name.

Iterate over search and for each value you append to your params a new status value:

const getFilterData = (search, pageNumber) => {
    const params = new URLSearchParams();
    search.forEach(value => params.append('status', value));

    if (pageNumber) {
        params.append('page', pageNumber) ;
    }
    axios.get("/api/influencers", { params }).then(res => {
        setState({
            items: res.data.data
        });
    });
};

answered Feb 11, 2021 at 2:20

Rafael Buzatto de Campos

10.5k6 gold badges29 silver badges36 bronze badges

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

1 Comment

Victor Over a year ago

Thank you for your reply , This is possible, but the PageNumber is invalid because it's not an array

Jose Cabrera Zuniga · Accepted Answer · 2021-02-11 00:20:41Z

0

Why not -with axios- you send a string as:

"contact;fee;inbox"

and in the backend convert this string to an array using a function like split(';')?

answered Feb 11, 2021 at 0:20

Jose Cabrera Zuniga

2,6857 gold badges40 silver badges69 bronze badges

3 Comments

Jose Cabrera Zuniga Over a year ago

What is your back end reading? What language are you using in your back end? Axios and java script/react are typically for the front end unless you use nodejs as web server where you can use java script for back end coding.

Victor Over a year ago

Back-end encoding. I use laravel is php

Jose Cabrera Zuniga Over a year ago

and, after the axios request is sent from the front end, what is receiving the respective controller function? I had a similar problem and the controllers were always able to get the string after processing a json object that contained the string. The use of json is kind of standard in these cases.

Collectives™ on Stack Overflow

How to pass an array in query parameter url react

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related