Retrieve JSON Data with AJAX

Question

Im trying to retrieve some data from JSON object which holds location information such as streetname, postcode etc. But nothing is being retrieved when i try and put it in my div. Can anybody see where im going wrong with this?

This is my ajax code to request and retrieve the data

var criterion = document.getElementById("address").value;
$.ajax({
          url: 'process.php',
          type: 'GET',
          data: 'address='+ criterion,
          success: function(data) 
          {
              $('#txtHint').html(data);
              $.each(data, function(i,value)
                {
                    var str = "Postcode: ";
                    str += value.postcode;
                    $('#txtHint').html(str);
                });
            //alert("Postcode: " + data.postcode);
          },
          error: function(e) 
          {
            //called when there is an error
            console.log(e.message);
            alert("error");
          }
});

When this is run in the broswer is just says "Postcode: undefined".

This is the php code to select the data from the database.

    $sql="SELECT * FROM carparktest WHERE postcode LIKE '".$search."%'";


$result = mysql_query($sql);

while($r = mysql_fetch_assoc($result)) $rows[] = $r;
echo json_encode($rows), "\n"; //Puts each row onto a new line in the json data

data: 'address='+ criterion, can easily be changed to data: { address: criterion }, makes it simpler to add more. — Kep
– Kep, Commented May 9, 2012 at 16:00
additionally, since you're using JQuery - you can replace getElementById simply with $("#address") — Codecraft
– Codecraft, Commented May 9, 2012 at 16:01
Also - a top AJAX tip is to open the target URL directly in a browser first to make sure that works, and then you know if the fault lies in fetching the result, or interpreting it. — Codecraft
– Codecraft, Commented May 9, 2012 at 16:02
Try giving the url to your page, so we can take a look at the JS console output for ourselves. — Kep
– Kep, Commented May 9, 2012 at 16:03

score 2 · Accepted Answer · 2012-05-09 16:20:11Z

2

You are missing the data type:

$.ajax({
  dataType: 'json'
})

You can use also the $.getJSON

EDIT: example of JSON

$.getJSON('process.php', { address: criterion } function(data) {
    //do what you need with the data
    alert(data);
}).error(function() { alert("error"); });

edited May 9, 2012 at 16:20

answered May 9, 2012 at 16:02

user800014

Sign up to request clarification or add additional context in comments.

5 Comments

lnelson92 Over a year ago

Im a bit confused as to how i would change it to .getJSON

user800014 Over a year ago

Ok, i put an example of getJSON.

lnelson92 Over a year ago

Thanks, ive jsut tried using that code and displaying all of the object as i did before and nothing appeared in my div. I tried this $.getJSON('process.php', { address: criterion }, function(data) { //do what you need with the data $('#txtHint').html(data); }).error(function() { alert("error"); });

lnelson92 Over a year ago

Also when i enter the dataType:'json' nothing displays now.

user800014 Over a year ago

The return is a json, not a html so you cannot just call .html(). If you alert the data, what appears?

Niet the Dark Absol · Accepted Answer · 2012-05-09 16:01:01Z

1

Just look at what your code is doing.

First, put the data directly into the #txtHint box.

Then, for each data element, create the string "Postcode: "+value.postcode (without even checking if value.postcode exists - it probably doesn't) and overwrite the html in #txtHint with it.

End result: the script is doing exactly what you told it to do.

Remove that loop thing, and see what you get.

answered May 9, 2012 at 16:01

Niet the Dark Absol

326k85 gold badges478 silver badges604 bronze badges

1 Comment

lnelson92 Over a year ago

Thanks for the reply. How would i check if there is somthing in value.postcode?

Ben M · Accepted Answer · 2012-05-09 16:02:49Z

0

Does your JSON data represent multiple rows containing the same object structure? Please alert the data object in your success function and post it so we can help you debug it.

answered May 9, 2012 at 16:02

Ben M

2,4851 gold badge21 silver badges19 bronze badges

Comments

Prasenjit Kumar Nag · Accepted Answer · 2012-05-09 16:12:22Z

0

Use the

dataType: 'json'

param in your ajax call or use $.getJSON() Which will automatically convert JSON data into a JS object.

You can also convert the JSON response into JS object yourself using $.parseJSON() inside success callback like this

data = $.parseJSON(data);

answered May 9, 2012 at 16:12

Prasenjit Kumar Nag

13.5k3 gold badges47 silver badges57 bronze badges

Comments

Kep · Accepted Answer · 2012-05-09 16:37:00Z

This works for me on your site:

function showCarPark(){
    var criterion = $('#address').val();

    // Assuming this does something, it's yours ;)
    codeAddress(criterion);

    $.ajax({
        url: 'process.php',
        type: 'GET',
        dataType: 'json',
        data: {
            address: criterion
        },
        success: function(data)
        {
            $("#txtHint").html("");
            $.each(data, function(k,v)
            {
                $("#txtHint").append("Postcode: " + v.postcode + "<br/>");
            });
        },
        error: function(e)
        {
            alert(e.message);
        }

    });
}

Collectives™ on Stack Overflow

Retrieve JSON Data with AJAX

5 Answers 5

5 Comments

1 Comment

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

1 Comment

Comments

Comments

Comments

Related