How to fetch form data with variable names ending with a colon:

Community Help
1

I’m trying to use a web API that was designed to work with HTTP POST requests from the form below. I want to post to it as in the examples at https://beta.observablehq.com/@chrisprice/rest-websockets and https://beta.observablehq.com/@mbostock/posting-with-fetch.

Note that unlike the examples above, the names of the parameters used by the API all end with colons. For example, name=“Number:”. When I point the form at mockbin, it confirms that the post variable names do indeed all end with colons.

<form action="https://mockbin.com/request" method="post">
Number 
  <input type=text name="Number:" value="5">
  <br/>
Parity 
  <select name="Parity:">
    <option value=1>Odd</option>
    <option value=2 selected>Even</option>
  </select>

  <input type=hidden name="Secret:" value="code">
<br/>
  <input type="submit" value="Submit">
</form>

When I post to the actual site instead of mockbin, the response is a list of 3D integer coordinates formatted as sets of 3 integers on each line as shown here:

<body bgcolor="#ffffff">
<pre>
-1 -1 -2 
1 -1 -2 
0 0 -2 
-1 1 -2
1 1 2 
</pre>
</body></html>

I have two questions:

  1. How do I post the correct variable names (including the trailing colons) using d3 as in the examples.
  2. Is d3.dsv or d3.text a reasonable tool to parse the result? If so, can you provide an example of using either of them to generate a data set from the post result? If not, can you suggest an alternative approach?

Thanks

2

Hi David,

Do you have a work-in-progress notebook that you might be able to share to see what you’ve tried so far, or a link to the actual API that you’re trying to request from?

3

Thanks Tom,

Here’s my work so far.

You can toggle the URL between MockBin and the site with the actual data. Submitting the form works with either URL, but d3.text fails with the URL of my API site.

4

Hi,

Sure - here’s an example: https://beta.observablehq.com/d/756d022ff7958a84

This uses viewof to let the value of the form be the data that it fetches, and uses FormData to send the form data.

What it doesn’t fix is requesting against the paulbourke.net URL: because of browser security rules, we can only request data from HTTPS sites that have CORS enabled. I’m not sure if paulbourke.net has CORS enabled, but it doesn’t support https, only its unencrypted cousin, http, so any browser will block the request.

5

Your example helps a lot as far as my understanding of the tools on observable. However if, as you noted, I can’t access the remote data unless it’s available via https and the site has CORS enabled, then it seems to be a moot point. It may be less work to reinvent the wheel and do the calculations myself than to query and parse the data from original 2004 web site. Maybe I’ll reconsider that approach.

Thanks again for your help.