Send nested objects in GET method URL search params in Axios

Question

I am trying to send the request with URL search params as below but I am not able to access a nested object filter on the server side.

axios.get('/get handler', {
  params: { 
    room: 1,
    filter: {
     fan: 2, 
     table: 1,
  }
});

What Am I possibly doing wrong?
I am using Django restFramework 3 on the server side and I am not able to access filter key in the method. I am accessing query params using request.query_params but when i do request.query_params.get('filter') I get none

What are you using to run your server? NodeJS with Express? Or... something else? — Matt Carlotta
– Matt Carlotta, Commented Mar 4, 2019 at 7:06
Django rest Framework 3.... I am accessing query params using request.query_params but when i do request.query_params.get('filter') I get none — uneet7
– uneet7, Commented Mar 4, 2019 at 7:08

uneet7 · Accepted Answer · 2019-09-13 04:15:53Z

18

You need to serialize your params and that you can do by writing a small config as mentioned in this github issue,

Usually you would have this config in the main.js file or the top level file of your application, but again it depends on when you want to execute it

// main.js
import axios from "axios";

// Format nested params correctly
axios.interceptors.request.use(config => {
  window.console.log(config);

  config.paramsSerializer = params => {
    // Qs is already included in the Axios package
    return Qs.stringify(params, {
      arrayFormat: "brackets",
      encode: false
    });
  };

  return config;
});

From axios 0.18.0 onwards:

// main.js
import axios from "axios";
import Qs from 'qs';

// Format nested params correctly
axios.interceptors.request.use(config => {

  config.paramsSerializer = params => {
    // Qs is not included in the Axios package
    return Qs.stringify(params, {
      arrayFormat: "brackets",
      encode: false
    });
  };

  return config;
});

edited Sep 13, 2019 at 4:15

uneet7

3,0858 gold badges28 silver badges43 bronze badges

answered Mar 4, 2019 at 7:47

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

1 Comment

uneet7 Over a year ago

Qs is removed from the axios 0.18.0 onwards. Use library query-string or qs to encode params for anyone who is visiting this answer afterwards.

Collectives™ on Stack Overflow

Send nested objects in GET method URL search params in Axios

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related