CODEWITHSUNDEEP
javascriptjsonpostd3.jsfetch
jotrocken
jotrocken

Reputation: 2333

Send POST request in d3 (with d3-fetch)

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?

Upvotes: 4

Views: 3063

Answers (4)

diogo
diogo

Reputation: 771

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>

Upvotes: -1

geoff
geoff

Reputation: 560

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
    })
})

Upvotes: 0

jotrocken
jotrocken

Reputation: 2333

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.

Upvotes: 3

Gerardo Furtado
Gerardo Furtado

Reputation: 102198

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

Upvotes: 1

Related Questions