$.getJSON function not working with php json_encoded array

Question

I'm new to JSON and not that familiar with jQuery.

I have been trying to get the $.getJSON function to work for hours now, and it won't. Here's my setup:

ajax.php file:

<?php 
require_once('../../libs/connection.class.php');
require_once('../../libs/actions.class.php');

$dbcon = new connection();

$actions = new action($dbcon);

if (isset($_GET['action'])) {

switch ($_GET['action']) {

    case 'getstates':
        header('Content-Type: application/json');
        echo json_encode($actions->liststates());
        break;

    default:
        break;
}

}
?>

scripts.js file:

$('select[name=stationcountry]').change(function(){

    var value = $(this).val();

    $.getJSON('lib/ajax.php?action=getstates',function(data){

        //What CODE TO PUT HERE?

        $("#kirky").html()
    };



    });



});

actions.class.php - this is the liststates class:

public function liststates(){

    $states = array(
        'AL'=>"Alabama",
        'AK'=>"Alaska", 
        'AZ'=>"Arizona", 
        'AR'=>"Arkansas", 
        'CA'=>"California", 
        'CO'=>"Colorado", 
        'CT'=>"Connecticut", 
        'DE'=>"Delaware", 
        'DC'=>"District Of Columbia", 
        'FL'=>"Florida", 
        'GA'=>"Georgia", 
        'HI'=>"Hawaii", 
        'ID'=>"Idaho", 
        'IL'=>"Illinois", 
        'IN'=>"Indiana", 
        'IA'=>"Iowa", 
        'KS'=>"Kansas", 
        'KY'=>"Kentucky", 
        'LA'=>"Louisiana", 
        'ME'=>"Maine", 
        'MD'=>"Maryland", 
        'MA'=>"Massachusetts", 
        'MI'=>"Michigan", 
        'MN'=>"Minnesota", 
        'MS'=>"Mississippi", 
        'MO'=>"Missouri", 
        'MT'=>"Montana",
        'NE'=>"Nebraska",
        'NV'=>"Nevada",
        'NH'=>"New Hampshire",
        'NJ'=>"New Jersey",
        'NM'=>"New Mexico",
        'NY'=>"New York",
        'NC'=>"North Carolina",
        'ND'=>"North Dakota",
        'OH'=>"Ohio", 
        'OK'=>"Oklahoma", 
        'OR'=>"Oregon", 
        'PA'=>"Pennsylvania", 
        'RI'=>"Rhode Island", 
        'SC'=>"South Carolina", 
        'SD'=>"South Dakota",
        'TN'=>"Tennessee", 
        'TX'=>"Texas", 
        'UT'=>"Utah", 
        'VT'=>"Vermont", 
        'VA'=>"Virginia", 
        'WA'=>"Washington", 
        'WV'=>"West Virginia", 
        'WI'=>"Wisconsin", 
        'WY'=>"Wyoming"
    );

    return $states;


    }

and here is the JSON that the page outputs:

{"AL":"Alabama","AK":"Alaska","AZ":"Arizona","AR":"Arkansas","CA":"California","CO":"Colorado","CT":"Connecticut","DE":"Delaware","DC":"District Of Columbia","FL":"Florida","GA":"Georgia","HI":"Hawaii","ID":"Idaho","IL":"Illinois","IN":"Indiana","IA":"Iowa","KS":"Kansas","KY":"Kentucky","LA":"Louisiana","ME":"Maine","MD":"Maryland","MA":"Massachusetts","MI":"Michigan","MN":"Minnesota","MS":"Mississippi","MO":"Missouri","MT":"Montana","NE":"Nebraska","NV":"Nevada","NH":"New Hampshire","NJ":"New Jersey","NM":"New Mexico","NY":"New York","NC":"North Carolina","ND":"North Dakota","OH":"Ohio","OK":"Oklahoma","OR":"Oregon","PA":"Pennsylvania","RI":"Rhode Island","SC":"South Carolina","SD":"South Dakota","TN":"Tennessee","TX":"Texas","UT":"Utah","VT":"Vermont","VA":"Virginia","WA":"Washington","WV":"West Virginia","WI":"Wisconsin","WY":"Wyoming"}

can someone please help me list all the states from the JSON output?

Thanks.

Answer 1

Assuming the json is retrieved properly and processed by jquery, then it's just another javascript data structure, and you loop over it to build your states list, eg:

$.each(data, function(key, val) {
    $('#kirky').append(key + ': ' + val + '<br />');
});