CODEWITHSUNDEEP
javascriptajaxapi
adamscott
adamscott

Reputation: 853

Using zippopotam.us to auto-populate zip-code if user enters city and state

I know you can use the zippopotam API to auto-populate the city and state of a given zip code, but I am trying to find a way to use the API to auto-populate the zip-code if a city and state is given.

If you look at the ajax call below, you can see I am making a request using the zip code value, but if you pass in a parameter other than zip code it returns an empty JSON block.

I was just curious, does anyone have experience using or manipulating zippopotam responses in this way?

If not is there another possible simple solution out there I may not have found yet? 

  <script>
    $(function() {

      // OnKeyDown Function
      $("#zip").keyup(function() {
        var zip_in = $(this);
        var zip_box = $('#zipbox');

      if ((zip_in.val().length == 5) )
        {
          // Make HTTP Request
          $.ajax({
            url: "http://api.zippopotam.us/us/" + zip_in.val(),
            cache: false,
            dataType: "json",
            type: "GET",
            success: function(result, success) {
              // Make the city and state boxes visible
              // US Zip Code Records Officially Map to only 1 Primary Location
              places = result['places'][0];
              $("#city").val(places['place name']);
              $("#state").val(places['state']);
              zip_box.addClass('success').removeClass('error');
            },
            error: function(result, success) {
              zip_box.removeClass('success').addClass('error');
            }
          });
        }
  });
    });

  </script>

<fieldset>
        <legend>US Address Autocompletion</legend>
        <br/>
        <div>
          <div id="zipbox" class="control-group">
            <label for="zip">Zip</label>
            <input type="text" class='' pattern="[0-9]*" name="zip" id="zip" placeholder="Type your ZIP code"/>
          </div>
        </div>
        <div>
          <div id="citybox" class="control-group" >
            <label for="city">City</label>
            <input type="text" name="city" id="city" placeholder="" />
          </div>
          <div id="statebox" class="control-group">
            <label for="state">State</label>
            <input type="text" name="state" id="state" placeholder="" />
          </div>
        </div>
      </fieldset>

Upvotes: 3

Views: 2333

Answers (1)

rphv
rphv

Reputation: 5537

Most cities have more than one ZIP code, so you'll need to be more specific than city/state to auto-populate a single ZIP code.

However, zippopotam.us does provide an API for getting ZIP codes based on city/state.

The URLs are of the form http://api.zippopotam.us/country/state/city.

Here's an example of how to use it. Try entering e.g. City = "Peoria" and State = "IL"

function getZips() {
  var city = document.getElementById("city").value;
  var state = document.getElementById("state").value;
  var client = new XMLHttpRequest();
  client.open("GET", "http://api.zippopotam.us/us/" + state + "/" + city, true);
  client.onreadystatechange = function() {
    if (client.readyState == 4) {
      document.getElementById("result").innerHTML = 
        JSON.stringify(JSON.parse(client.responseText), null, 4);
    };
  };
  client.send();
  return false;
}
<form>
  City:<br>
  <input type="text" id="city"><br>
  State (postal abbr.):<br>
  <input type="text" id="state"><br>
</form>
<br>
<button onclick="getZips()">Submit</button>
<hr>
<h3>Results:</h3>
<pre id="result"></pre>

Upvotes: 1

Related Questions