javascript - $.getJSON doesn't work but having the JSON object in the script works -

i trying dynamically create simple select contains object's property option based on constraints.

everything works fine when json part of script.

fiddle

the code

$(document).ready(function(){     /*$.getjson('input.json',function(data){         alert('inside');     });*/      /*$.getjson("inputjson.json", function(data){         // have placed alert here , realized doesn't go here         console.log("datd");         console.log(json.stringify(data,null,4));     });*/        var jsonlist =      {         "json_data" : {             "data" : [                 {                     "data" : "a node",                     "metadata" : { id : 23 },                     "children" : [ "child 1", "a child 2" ]                 },                 {                     "attr" : { "id" : "li.node.id1" , "level" : "3" , "name" : "ragini" },                     "data" : {                         "title" : "long format demo",                         "attr" : { "href" : "#" }                     }                 },                 {                     "attr" : { "id" : "li.node.id1" , "level" : "3" , "name" : "rag" },                     "data" : {                         "title" : "long format demo",                         "attr" : { "href" : "#" }                     }                 },                 {                     "attr" : { "id" : "li.node.id1" , "level" : "4" , "name" : "skyrbe" },                     "data" : {                         "title" : "long format demo",                         "attr" : { "href" : "#" }                     }                 }             ]         }     }       var newobject = jsonlist.json_data.data;     var listitems= "";      $form = $("<form></form>");     $('#form_container').append($form);      var $selectcontainer = $("<select id=\"selectid\" name=\"selectname\" />");      (var = 0; < jsonlist.json_data.data.length; i++)     {         if(jsonlist.json_data.data[i].hasownproperty("attr") && jsonlist.json_data.data[i].attr.level == 3)         {             listitems+= "<option value='" + jsonlist.json_data.data[i].attr.name + "'>" + jsonlist.json_data.data[i].attr.name + "</option>";         }     }     $($selectcontainer).html(listitems);     $($form).append($selectcontainer); }); 

but when try put json seperate .json file , use $.getjson , not having success . , control never comes it.

this code have written $.getjson

$.getjson('input.json',function(data){     console.log(json.stringify(data,null,4)); }); 

can please point out mistake is.

cheers, harsha

you trying make select element before getjson call has finished. put rest of code callback function of getjson function, so:

$.getjson("inputjson.json", function(data){     // have placed alert here , realized doesn't go here     console.log("datd");     console.log(json.stringify(data,null,4));     var newobject = jsonlist.json_data.data;     var listitems= "";      $form = $("<form></form>");     $('#form_container').append($form);     // etc }); 

also note have typo , unneeded quotes - console.log("datd"); should console.log(data); (unless did want put word 'datd' log).