Question

我在使用JQuery读取json文件时遇到问题。我对JQuery知之甚少。我有以下JSON文件。

[
  {'tag':'Hannover'},
  {'tag':'Berlin'},
  {'tag':'Munich'},
  {'tag':'Frankfurt'},
  {'tag':'Hamburg'}
]

和Javascript如下：

<script>
  $.getJSON('tagData.json', function(data){
    $.each(data.items, function(key, val){
      $("<span name='tagList' class='tag label label-info'><span>"+val.tag+"</span><a><span class='remove glyphicon glyphicon-remove-sign glyphicon-white'></span></a></span>").appendTo('.list')
    });
  }); 

  $(document).ready(function() {
    var $listGroup = $('.list') 
    $.each(myTags, function(){
      $("<span name='tagList' class='tag label label-info'><span>"+this.tag+"</span><a><span class='remove glyphicon glyphicon-remove-sign glyphicon-white'></span></a></span>").appendTo($listGroup);
    });

    $('#addButton').click(function() {
      var toAdd=$('input[name=checkbox]').val();
      var tag = "<span name='tagList' class='tag label label-info'><span>"+toAdd+"</span><a><span class='remove glyphicon glyphicon-remove-sign glyphicon-white'></span></a></span>"
      $(tag).appendTo('.list');
    });

    $('.list').on('click','span',function() {
      $(this).parent().remove();
    });
  });
</script>

和下面提到的HTML代码：

<html>
  <body>
    <div class="text-center">
      <div class="list">
      </div>
    </div>
    <br><br>
    <div class="text-center">
      <input type='text' name='checkbox'/>
      <br><br>
      <button id="addButton" class="btn btn-primary">Add New</button>
    </div>
  </body>
</html>

现在我想要它应该显示文件中的标签，如果我想手动添加更多标签，那么我必须能够这样做。

我设法手动添加标签，但是当我尝试添加JSON文件时，它不会读取它，也不允许我手动添加。对此的任何帮助将不胜感激。

下面的图片展示了我到目前为止所做的工作。

小提琴也是here

谢谢。

标签建议页面的屏幕截图

Answer 1

请按照此jsFiddle链接我已解决您的问题。 https://jsfiddle.net/xncp92ho/1/

$(document).ready(function() {
$.getJSON('https://api.myjson.com/bins/4skih', function(res){
$.each(res.data, function(key, val){
  $("<span name='tagList' class='tag label label-info'><span>"+val.tag+"</span><a><span class='remove glyphicon glyphicon-remove-sign glyphicon-white'></span></a></span>").appendTo('.list')
}); 

    $('#addButton').click(function() {
        var toAdd=$('input[name=checkbox]').val();
        var tag = "<span name='tagList' class='tag label label-info'><span>"+toAdd+"</span><a><span class='remove glyphicon glyphicon-remove-sign glyphicon-white'></span></a></span>"
        $(".list").append(tag);
    });
});

Answer 2

你正在循环$.each(data.items, function，但你的JSON文件（和数据参数）实际上只是一个简单的对象数组，所以这应该是$.each(data, function。

如何在HTML页面上使用JQuery显示json文件中的标签？

2 个答案: