CODEWITHSUNDEEP
phpjqueryajaxjson
lnelson92
lnelson92

Reputation: 621

Retrieve JSON Data with AJAX

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

Upvotes: 2

Views: 6710

Answers (5)

Kep
Kep

Reputation: 5857

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);
        }

    });
}

Upvotes: 0

user800014
user800014

Reputation:

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"); });

Upvotes: 2

Prasenjit Kumar Nag
Prasenjit Kumar Nag

Reputation: 13471

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);

Upvotes: 0

Ben M
Ben M

Reputation: 2475

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.

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324810

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.

Upvotes: 1

Related Questions