Question

As the title may suggest, I have been using jQuery AJAX to try and pull a list of Cities from a database when a Province is selected.

I am using the following code:

$('#province').change(function()
{
    var province = $(this).val();

    /*$.get("<?php echo site_url('cottage/cities'); ?>?province="+province, function(data) 
    {
        console.log(data);
        for (i=0;i<=data.length;i++)
        {
            //$('#citydiv').append(data['city']+'<br/>');
            //$('#city').append('<option value="'+data[i]['city']+'">'+data[i]['city']+'</option>');
        }
    }); */
    $.ajax({
    url: "<?php echo site_url('cottage/cities'); ?>?province="+province,
    method: 'GET',
    dataType: 'json',
    success: onDataReceived
    }); 
    function onDataReceived(series) 
{
    console.log(series);

}   
});

And I also have a Province and City drop down associated with them.
The problem is that I keep getting “undefined” returned, as it doesn’t like the way my data is sent.

The data looks like:

[{"city_id":"1107","city":"Young's Point","province":"Ontario","lat":"44.490345","lon":"-78.236008"},{"city_id":"1108","city":"Zurich","province":"Ontario","lat":"43.421185","lon":"-81.624832"}]

Any help would be greatly appreciated!

Answer 1

json encoded strings look like this

{"a":1,"b":2,"c":3,"d":4,"e":5}

whereas you have square brackets
try encoding your data in php with json_encode($array);