ajaxundefinedresponsetext

ziptastic response text shows 'undefined'

I am trying to fetch city and state data from ziptastic using following code

function showZipData(){
zipcode = document.getElementById("zipcode").value;
zipData = document.getElementById("divZipDetails")
var client = new XMLHttpRequest();
client.open("GET", "http://www.ziptasticapi.com/"+zipcode, true);
client.onreadystatechange = function() {
if(client.readyState == 4)
{
var elements = client.responseText;
alert(elements.city);
alert(elements.state);
}}client.send();}

But, both the alerts are returning undefined... Please help...

Solution

  • You are simply missing a call to JSON.parse(..)

    var elements = JSON.parse(client.responseText);
console.log("elements: " + elements);
console.log("elements.city: " + elements.city);
console.log("elements.state: " + elements.state);

    Works for me!