如何将嵌套主体添加到 fetch()

Question

How to add nested body to fetch() function?

I have this body:

{
                "locations": [
                    {
                        "latLng": {
                            "lat": 123,
                            "lng": 123
                        }
                    },
                    {
                        "latLng": {
                            "lat": 123,
                            "lng": 123
                        }
                    }
                ]
            }

I try with this code, but it returns me SyntaxError: Unexpected token o in JSON at position 1 :

fetch(url, {
        method: "post",
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        body: {
                "locations": [
                    {
                        "latLng": {
                            "lat": 53.438679,
                            "lng": 14.520770
                        }
                    },
                    {
                        "latLng": {
                            "lat": 53.450439,
                            "lng": 14.536400
                        }
                    }
                ]
            }
    });

Answer 1

The body of the init object for fetch can be one of: a Blob , BufferSource , FormData , URLSearchParams , USVString (string), or ReadableStream object. ( MDN | spec )

You're not giving it any of those things. You're giving it a plain object. If you want to send JSON , you need to give it a string:

fetch(url, {
    method: "post",
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
// −−−−−−−^^^^^^^^^^^^^^^
            "locations": [
                {
                    "latLng": {
                        "lat": 53.438679,
                        "lng": 14.520770
                    }
                },
                {
                    "latLng": {
                        "lat": 53.450439,
                        "lng": 14.536400
                    }
                }
            ]
        })
// −−−−−−^
});

The reason you're getting the specific error you are is that since what you've provided isn't one of the things it expects, fetch is converting it to string as though you did String(yourObject) . On a plain object, unless you've done something to override it (which you haven't in your example), the result is "[object Object]" , which is invalid JSON as of the o in object after the opening [ .

---

Remember: JSON is a textual notation for data exchange. (More here.) If you're dealing with JavaScript source code, and not dealing with a string , you're not dealing with JSON.