Question

我是json的新手，并且正在努力学习一段代码。我想使用json文件（国家/地区名称）中的数据填充引导程序dropdown按钮。

这是我的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"
  }]
}

这是我在html中的javascript文件：

<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添加到div，所以只需使用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

如何使用HTML中的JSON外部文件填充下拉按钮

4 个答案: