Ajax调用json

I am having 2 questions 1st : I am trying to run this file but it is not even giving any error not showing result please tell what is the problem 2. I want to get the names in the dropdown as well so i have put select tag but I don't know how to use it to get the list of names...please suggest

My html file

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta content="utf-8" http-equiv="encoding">

        <title>D3</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
        <script src="my_script.js" type="text/javascript></script>
     </head>



    <body>
 <button type="button">Click Me!</button> 
         <select>
          </select> 
            </body>
    </html>

My script.js file

    $("button").click(function() {

    $.getJSON("data.json",function(obj) {
    $.each(obj, function(key, value){
    $ ("ul").append("<li>"+value.name +"</li>");
    });

    });
    });

My json file

[{
  "name": "obs",
  "date": "1458834026000"
  "attr001": "brs1"
  "attr002": "crs1"
  "attr003": "drs1"
}, {
  "name": "hid",
  "date": "1458774000000"
  "attr001": "ffrs1"
  "attr002": "grrs1"
  "attr003": "mno1"
}, {
  "name": "qwe",
  "date": "1425744000000"
  "attr001": "klm1"
  "attr002": "wer1"
  "attr003": "iop1"
}, {
  "name": "rty",
  "date": "1458774000000"
  "attr001": "yrs1"
  "attr002": "qws1"
  "attr003": "prs1"
}]

It was not giving error because you've forgot to put "(closing inverted comma) end of type/javascript.

I've tested this one. Its working with your Json file.

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta content="utf-8" http-equiv="encoding">

    <title>D3</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="my_script.js" type="text/javascript"></script>
</head>

<body>
    <button>Click Me</button>
    <select>
    </select> 
</body>
</html>

Now in your script.js

$(document).ready(function(){
    $.getJSON("data.json",function(obj) {
        $.each(obj, function(key, value){
            $ ("select").append("<option>"+value.name +"</option>");
        });

    });
})

You were using ul and li instead of option tag.

Update : As you asked in comment.

script.js

jQuery(function(){
    $(document).on("click","button",function() {
    // alert('hi')
        $.getJSON("data.json",function(obj) {
            $.each(obj, function(key, value){
                $ ("#dropdown1").append("<option value="+key+">"+value.name +"</option>");
            });

        });
    });
    $(document).on('change','#dropdown1',function(){
        //do some ajax call and put the data into another dropdown e.g.,
        $.get('data.json',function(obj){
            obj = JSON.parse(obj)
            $.each(obj, function(key, value){
                $ ("#dropdown2").append("<option value="+key+">"+value.name +"</option>");
            });
        })
    })
})

and in html

<body>
    <button>Click Me</button>
    <select id="dropdown1"></select> 
    <select id="dropdown2"></select> 
</body>