Send POST request in d3 (with d3-fetch)

Question

I need to send a JSON object to a remote service via an HTTP POST request. Recent versions of d3.js use d3-fetch for gathering data (from file or via network) instead of d3-request. I found plenty of examples (1, 2 and 3) for earlier versions of the library, but nothing for the latest version (as of August 2018). The documentation for d3-fetch also lacks an example how to set up the RequestInit object such that a POST request is sent. Did anyone do this already?

Answer 1

Here is a workaround I meanwhile found using d3.text.

var request = d3.text("http://localhost:8080/service?action=store", {
    method: "POST",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    body: "entry=" + JSON.stringify(playerData)
});

I needed to set the Content-Type to application/x-www-form-urlencoded in order for the JSON payload to be sent. Stringifying the JSON and wrapping it as value to some arbitrary key was necessary so that the request gets though. I am in control of the backend service's source code and could change it to read the JSON directly, if it would be possible to send it just like so.

Using d3.json instead with the plain JSON as body and the respective Content-Type (compare What is the correct JSON content type?) did not work: the request wont include any payload.

My solution looks rather complicated so I guess there must be a cleaner way and I am eager to accept any working improvements.

Answer 2

Since you didn't specify the method you're using, let's suppose you're using d3.json (probably, since you want to send a JSON).

If you look at the API, you'll see:

d3.json(input[, init])

Where init is the init object, as you already know. From the Fetch documentation for the allowed fields we can see:

method: A string to set request’s method.

And the most important:

A request has an associated method (a method). Unless stated otherwise it is GET.

Therefore, what you need is something like this:

d3.json(input, {method: "post"})

Among other necessary fields. This is an interesting example (not D3-related): https://googlechrome.github.io/samples/fetch-api/fetch-post.html

Answer 3

I had success using this:

d3.json("http://localhost:8545", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      jsonrpc: "2.0",
      method: "eth_blockNumber",
      params: [],
      id: 1
    })
})

Answer 4

Parsing the json returned by the resource:

<script src="https://d3js.org/d3-dsv.v2.min.js"></script>
<script src="https://d3js.org/d3-fetch.v2.min.js"></script>
<script>
    d3.json("<url>", {
        method: "POST",
        headers: { "Content-Type": "application/json" }
    }).then(data => {
        console.log(JSON.parse(data.body))
    })
</script>