Query API with Array Parameters in React

Question

My params in React is an array, checkedItems:['location1', 'location2']. When it calls my API, the URL looks like this

/api/search?checkedItems[]=location1&checkedItems[]=location2

instead of

/api/search?checkedItems=['location1','location2']

My API application is expecting to query a comma delimited array parameter:

  public List<myclass> Get( string checkedItems = null)
    {
      IQueryable<myclass> qry = (from a in db.myclass
                       select a);

        if (checkedItems != null)
        {


            string[] items = checkedItems.Split(',');
            foreach (var item in items)
            {

                {
                    qry = qry.Where(a => items.Contains(a.mycolumn));

                }

            }
           }

     return qry.ToList();
       }

How do I change the react code or change API code? Thanks.

makkBit · Accepted Answer · 2019-07-11 16:19:29Z

7

Instead of '/api/search?checkedItems=['location1','location2']', separate the array field with commas, like so '/api/search?checkedItems=location1,location2'

To do this,

let checkedItems = ['location1', 'location2']
// using template literals
let url = `/api/search?checkedItems=${checkedItems.join(',')}`

Then on the backend simply get the query param checkedItems and split it checkedItems.split(',') to get the array.

answered Jul 11, 2019 at 16:19

makkBit

3933 silver badges15 bronze badges

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

Comments

keul · Accepted Answer · 2019-07-11 16:26:45Z

0

This largely depends on your backend technology, but a lot of API libs/framework automatically transform parameters to array for you.

Keep in mind that having an URL like /api/search?checkedItems=location1&checkedItems=location2 (so: same parameter multiple times) is a perfectly valid URI.

I can't say if this is your case or not.

answered Jul 11, 2019 at 16:26

keul

7,83928 silver badges48 bronze badges

Collectives™ on Stack Overflow

Query API with Array Parameters in React

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related