Send nested json data with get method using axios

Question

I am trying to send a nested json data with get method using axios, but the problem is that the backend considers the children as a string.

const TOKEN = "token"
const config = {
    headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'Authorization': TOKEN,
    },
    data: {},
    params: {
        "page_id": 1,
        "filter": {
            "search": "name"
        }
    }
};
axios.get("http://localhost/api/pages", config)

What I get if I want to print filter in backend:

"{"search": "name"}"

config.params.filter

Joel
– Joel

2020-02-05 08:58:38 +00:00
Commented Feb 5, 2020 at 8:58 — Joel
– Joel, Commented Feb 5, 2020 at 8:58

Ahmad · Accepted Answer · 2020-02-05 09:20:27Z

8

You may have two options:

1- The first option is to decode the string you receive to json.

e.g.

---json_decode() in php

--- JSONObject() in java

--- JSON.parse() in nodejs

or any other method depending on your backend language...

2- The second option is to send your object in this format:

params: {
    "page_id": 1,
    "filter[search]": "name"
}

And pay attention not to put search in quotes!

answered Feb 5, 2020 at 9:20

Ahmad

1061 silver badge5 bronze badges

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

1 Comment

frank Over a year ago

for option 2, it throws error: Invalid character found in the request target

technophyle · Accepted Answer · 2020-02-05 09:01:47Z

0

You can use req.query on the server side:

function get(req, res, next) {
  const { filter } = req.query;
  console.log(filter);
  ...
}

answered Feb 5, 2020 at 9:01

technophyle

9,3677 gold badges34 silver badges52 bronze badges

Comments

Jon · Accepted Answer · 2020-02-05 09:03:50Z

0

Do a JSON.parse() of your Request.query.filter. Note that Request should be the request variable in your backend.

answered Feb 5, 2020 at 9:03

Jon

1666 bronze badges

Collectives™ on Stack Overflow

Send nested json data with get method using axios

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related