Как заполнить выпадающую кнопку с внешним файлом JSON в HTML

Question

Я новичок в json и борюсь с разделом кода. Я хочу заполнить загрузочную кнопку dropdown с данными из json-файла (названия стран).

Это мой HTML-код:

<div class="dropdown btn-group" id="countryBut"> 
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
        Select Your Country <span class="caret"></span> 
    </button> 
    <ul class="but-dropdown dropdown-menu"> 

    </ul> 
</div><!--end of btn-group--> 

Это мой внешний файл JSON - countries.json

{ 
    "countries": [{ 
    "name":"Afghanistan" 
    }, { 
    "name": "Albania" 
    }, { 
    "name": "Argentina" 
    }, { 
    "name": "United Kingdom" 
    }] 
} 

И это мой файл JavaScript в HTML:

<script type="text/javascript"> 
    $(document).ready(function(){ 
$.getJSON('countries.json', function(data) { 
    for(var index in data.countries) { 
     $('#countryBut ul').append('<li><a href="#" data-maker="'+data.countries[index].name 
    +'>'+data.countries[index].name+'</a></li>'); 
    } 
    }); 
}); 
</script> 

Попытка заставить его работать, но не может найти полезные ресурсы. Может кто-нибудь помочь?

Answer 1

Ваша часть javascript как-то странная.

Попробуйте этот код:

$(document).ready(function(){ 
    $.getJSON('countries.json', function(data) { 
     for(index in data.countries) { 
      $('#countryBut ul').append('<li><a href="#" data-maker="'+data.countries[index].name+'">'+data.countries[index].name+'</a></li>'); 
     } 
    }); 
}); 

Это как ваш JSON должен выглядеть:

{ 
    "countries": [ 
     { 
      "name":"Afghanistan" 
     }, 
     { 
      "name": "Albania" 
     }, 
     { 
      "name": "Argentina" 
     }, 
     { 
      "name": "United Kingdom" 
     } 
    ] 
} 

Answer 2

Эй ваш передний конец html файл вы забыли добавить класс dropdown в Див так просто добавить класс поскольку вы используете bootstrap для UI

<div class="btn-group dropdown" id="countryBut"> 

Попробуйте Понравился

$(document).ready(function(){ 
    $.getJSON('countries.json', function(data) { 
      for(var index in data.countries) { 
     $('#countryBut ul').append('<li><a href="#" data-maker="'+data.countries[index].name+'">'+data.countries[index].name+'</a></li>');  } 
    }); 
}); 

Answer 3

JSon файл будет выглядеть так:

"countries": [{ 
    "name": "Afghanistan" 
}, { 
    "name": "Albania" 
}, { 
    "name": "Argentina" 
}, { 
    "name": "United Kingdom" 
}] 

Надежда это прямо сейчас.

Answer 4

Dropdown-when clicked.

Вот что происходит, когда я нажимаю на него, ничего не отображается, JSON-файл, кажется загрузить штраф Json file-network