Unable to load JSON file using getJSON method

Unable to load JSON file using getJSON method

Here's my code 

  $(document).ready(function(){

                $.getJSON( "testJSON2.json", function(json){
                        $.each(json, function(key,value){
                                $("div").append( value.id  );
                        });
                        
                });
         });


testJSON2.json contents :
{       
"p1" : {"id": "whatever",          
        "name": "start",    
  }                                
} 

I am not sure where I am doing it wrong. I have everything in the html page. I made sure the <div> opening and closing tags are there. Help appreciated !!

I made sure, I also referenced the jquery which is a directory above. It was test and works fine.