Trouble with JSON

Question

Creating a JS app using jquery. Having real trouble using JSON to get the data into my script.

have the following data set being created in a .php script;

<?php
$golfer_id=45;
$score_arr[$golfer_id]["name"]="Dave Curry";
$score_arr[$golfer_id][1]=4;
$score_arr[$golfer_id][2]=3;
$score_arr[$golfer_id][3]=5;
$score_arr[$golfer_id][4]=5;
$score_arr[$golfer_id][5]=5;
$score_arr[$golfer_id][6]=5;
$score_arr[$golfer_id][7]=5;
$score_arr[$golfer_id][8]=5;
$score_arr[$golfer_id][9]=5;

$golfer_id=25;
$score_arr[$golfer_id]["name"]="John Doe";
$score_arr[$golfer_id][1]=2;
$score_arr[$golfer_id][2]=2;
$score_arr[$golfer_id][3]=1;
$score_arr[$golfer_id][4]=5;
$score_arr[$golfer_id][5]=5;
$score_arr[$golfer_id][6]=5;
$score_arr[$golfer_id][7]=5;
$score_arr[$golfer_id][8]=5;
$score_arr[$golfer_id][9]=5;

echo json_encode($score_arr);
?>

Eventually this data will come from a mysql query.

This produces:

{"45":{"name":"Bob Test","1":4,"2":3,"3":5,"4":5,"5":5,"6":5,"7":5,"8":5,"9":5},"25":{"name":"John Doe","1":2,"2":2,"3":1,"4":5,"5":5,"6":5,"7":5,"8":5,"9":5}} 

I am using this code

<?php
$hole=1;
$gid=$_REQUEST['gid'];

?>
<script type="text/javascript">

gid= <?php echo "$gid"; ?>+0;
hole = <?php echo "$hole"; ?>+0;

score_arr = new Object() ;
var total = new Array() ;

$(document).ready(function(){

// SET the intial values
$("#hole_num").text(hole);

// Get Data from db
$.getJSON("golf_be.php","", function(score_arr){
// score_arr = jQuery.parseJSON(score_arr);  Tried this it didn't work
console.log(score_arr); //uncomment this for debug
}); //End json
$("#score").text(score_arr[gid][hole]); \\ This has an error 
$("#golfer_name").text(score_arr[gid]["name"]);

Using Firebug i Get this error on the console. interestingly it the object is there.

TypeError: score_arr[gid] is undefined
[Break On This Error]   

$("#score").text(score_arr[gid][hole]);

golf.php?gid=25 (line 94)

Object { 0={...}, 45={...}, 25={...}}

Tried a lot of things but it sure looks to me that for some reason the object from the JSON is not getting into score_arr properly. As you can see I also tried parseJson with no luck.

Some other history, I started with the php array creation in the same script. and using php echo to get the encoded JSON array into the score var directly and everything worked great. Now adapting it to interact with the db.

Any help very appreciated. Bit of a newbie to jQuery and JS and have spent a lot of time searching this great site for an answer with no luck.

Answer 1

Thanks zshooter, your solution and a little more edcuation about callback functions I have it working the way I wanted. Made score_arr global and changes you suggested. To help others here is the code that works.

var score_arr  ;
var total = new Array() ;

$(document).ready(function(){

// SET the intial values
$("#hole_num").text(hole);

// Get Data from db
$.getJSON("golf_be.php","", function(data){

console.log(data); //uncomment this for debug

$("#score").text(data[gid][hole]);
$("#golfer_name").text(data[gid]["name"]);
score_arr= data;
}); //End json

Answer 2

You need to set your text inside the function you are passing into the getJSON call as follows:

$.getJSON("golf_be.php","", function(data) {
    $("#score").text(data[gid][hole]);
    $("#golfer_name").text(data[gid]["name"]);
);

This is because the function you are passing into getJSON is a callback function, so it will get executed after the data has been retrieved from your PHP page. As it is in your code it is not setting score_arr in the main function, you are creating a locally scoped variable named score_arr with your data in it, which is only available inside the function you are passing into the getJSON call.