Zapier.com zipcode autofill city and state

Question

We are using zapier.com to connect many programs, but one function that I need is to autofill the city and state from a zip code. This is available in zapier.com as setup Code by Zapier Run Javascript. I can't seem to figure this out and any help is much appreciated.

<script type="text/javascript">//<![CDATA[
    $(function() {
    // IMPORTANT: Fill in your client key
    var clientKey; // Deleted for Stack Overflow

    var cache = {};
    var container = $("#example1");
    var errorDiv = container.find("div.text-error");

    /** Handle successful response */
    function handleResp(data)
    {
      // Check for error
      if (data.error_msg)
        errorDiv.text(data.error_msg);
      else if ("city" in data)
      {
        // Set city and state
        container.find("input[name='city']").val(data.city);
        container.find("input[name='state']").val(data.state);
      }
    }

    // Set up event handlers
    container.find("input[name='zipcode']").on("keyup change", function() {
      // Get zip code
      var zipcode = $(this).val().substring(0, 5);
      if (zipcode.length == 5 && /^[0-9]+$/.test(zipcode))
      {
        // Clear error
        errorDiv.empty();

        // Check cache
        if (zipcode in cache)
        {
          handleResp(cache[zipcode]);
        }
        else
        {
          // Build url
          var url = "https://www.zipcodeapi.com/rest/"+clientKey+"/info.json/" +    zipcode + "/radians";

          // Make AJAX request
          $.ajax({
            "url": url,
            "dataType": "json"
          }).done(function(data) {
            handleResp(data);

            // Store in cache
            cache[zipcode] = data;
          }).fail(function(data) {
            if (data.responseText && (json = $.parseJSON(data.responseText)))
            {
              // Store in cache
              cache[zipcode] = json;

              // Check for error
              if (json.error_msg)
                errorDiv.text(json.error_msg);
            }
            else
              errorDiv.text('Request failed.');
          });
        }
      }
    }).trigger("change");
      });
//]]></script>

Answer 1

There are a couple points of confusion here, the main one being:

Code by Zapier is not run "in the browser" (there is no <script> tags or Jquery) - it is run in something called Node.js.

You'll need to approach the problem completely differently as a result - definitely take a look at the samples found in https://zapier.com/help/code/ and at the Node docs https://nodejs.org/docs/v4.3.2/api/.

Answer 2

It looks like you're trying to use client-side JavaScript here. This won't work in a Zapier code step because it's meant to be used in a browser (on a webpage). To make an HTTP request in a Zapier code step, you'll want to use fetch (here's some documentation on that).

Alternatively, the simplest way to get the data you need from that API is with a Webhook step:

1. Add a step to your Zap
2. Choose Webhooks by Zapier and select the GET action
3. Set up that step like this. The step will return city/state data which you can use in subsequent steps