AJAX return from SmartyStreets API

Question

I am having trouble actually returning any kind of object using this AJAX call. I know I am doing something wrong, but I have no idea where. I hope someone can help me I am looking to return an element in the object "zip". I would like to have any response really, but I can not get anything back.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#submit').click(function() {
                var result = $('#resultDiv')
                $.ajax({
                    url: 'https://us-street.api.smartystreets.com/street-address',
                    method: 'get',
                    data: {
                        auth-id='your-auth-id',
                        auth-token='your-auth-token',
                        street=$('#street'),
                        city=$('#city'),
                        state=$('#state')
                    },
                    dataType: 'json',
                    success: function(data) {
                        if (data = null)
                        {
                          result.html('You failed');
                        }
                        else {
                          result.html('Match:' + data.components[0].zipcode)
                        }
                    }
                });
            });
        });
    </script>
    <title>SSTest</title>
</head>

<body>
    <div class="container">
        <h1 style="text-align:center"> Welcome to Address Check </h1>
        <form action="#" method="post">
            <div class="form-group">
                <label for="street">Street</label>
                <input type="text" id="street" class="form-control" name="street">
            </div>
            <div class="form-group">
                <label for="city">City</label>
                <input type="text" id="city" class="form-control" name="city">
            </div>
            <div class="form-group">
                <label for="state">State</label>
                <input type="text" id="state" class="form-control" name="state">
            </div>
            <button type="submit" id="submit" class="btn btn-default">Submit</button>
            <br/>
            <br/>
            <div id="resultDiv"></div>
</body>

</html>

You really should not be posting your auth-id and token. It would be a good idea to delete those from your account and create a new pair. — SunSparc, Mar 07 '17 at 21:55

score 1 · Answer 1 · edited Mar 20 '17 at 18:08

As you are using a GET call, you can test this in the browser first AND make sure you are getting a response before you start wrapping it in a JQuery call.

https://us-street.api.smartystreets.com/street-address?auth-id=[your-auth-id]&auth-token=[your-auth-token]&street=SOMETHING&state=SOMETHING&city=SOMETHING

If you get a non-result, then consult the API to see if you are passing the correct parameters.

Using the DOCS, this call returns data for your API Keys -

https://us-street.api.smartystreets.com/street-address?auth-id=[your-auth-id]&auth-token=[your-auth-token]&street=1600+amphitheatre+pkwy&city=mountain+view&state=CA&candidates=10

This JQuery Get HTML example gets a response -

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $.get("https://us-street.api.smartystreets.com/street-address?auth-id=[your-auth-id]&auth-token=[your-auth-token]&street=1600+amphitheatre+pkwy&city=mountain+view&state=CA&candidates=10", function(data, status){
            alert("zipcode: " + JSON.stringify(data));
        });
    });
});
</script>
</head>
<body>

<button>Send an HTTP GET request to a page and get the result back</button>

</body>
</html>

You should be able to build from that as you refine your JQuery understanding to get exactly what you need.

I have tested it and confirmed that those credentials and information do return an object but I don't think I am getting a response at all. I thought it may have been spacing issues and checked that and still got nothing in return. — watkins1179, Feb 23 '17 at 06:50
Remember, that in order to get a response, if the address is invalid, you have to set the match parameter to "invalid" — Jeffrey, Mar 07 '17 at 23:38

score 0 · Answer 2 · answered Mar 07 '17 at 22:30

I was able to find a handful of errors with your code and fixed them here in this JSFiddle. Here are the list of errors you had.

Don't include your auth-id, auth-token in public code. You're giving away your address lookups by doing this. You should go remove these from your account and generate new ones.
In your original success function you didn't do a compare. You should use == here. Actually, the API will never send back null for data on success so you don't even need this here anymore. Use the error function instead.
The data object passed in the ajax call is done incorrectly. You should not be using =, instead use :.
In the data object you should call .val() after the jQuery selectors to get the values entered into those fields.
data.components[0].zipcode should be data[0].components.zipcode. The api will return back a data array of objects. components is not an array.

score 0 · Answer 3 · answered Dec 15 '22 at 07:54

The auth-id and token should only be used when used from server side. It is clearly mentioned not to expose the auth-id and auth-token in the documentation.

I used the FETCH API from Javascript and the code looks like this:

var key = '' //your embedded key here
var street = encodeURIComponent('1600 amphitheatre pkwy');
var city = encodeURIComponent('mountain view');
var state = 'CA';
var url = 'https://us-street.api.smartystreets.com/street-address?street=' + street + '&city=' + city + '&state=' + state + '&key=' + key;

const response = await fetch(url)
const responseData = await response.json()

AJAX return from SmartyStreets API

3 Answers3