如何在 HTML 页面上使用 JQuery 显示来自 json 文件的标签？答案

【问题标题】：How to show tags from json file using JQuery on an HTML Page?如何在 HTML 页面上使用 JQuery 显示来自 json 文件的标签？
【发布时间】：2016-06-29 12:12:15
【问题描述】：

我在使用 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

谢谢。

标签建议页面的屏幕截图

【问题讨论】：

将$.getJSON 调用放入 document.ready。目前，您可能会在 .list 存在之前向其添加元素。

标签： javascript jquery html css json

【解决方案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);
    });
});

【讨论】：

您好 Kaushik，非常感谢您，它现在正在我的项目中工作。我面临的唯一问题是，当我单击按钮删除标签时，它会删除所有标签。我尝试了很多方法，但由于所有标签（按钮）的标签和 ID 相同，它只是简单地刷掉所有标签。你知道会出什么问题吗？我更新了小提琴。 jsfiddle.net/xncp92ho/1

【解决方案2】：

您正在循环访问$.each(data.items, function，但您的 JSON 文件（和 data 参数）实际上只是一个简单的对象数组，因此应该只是 $.each(data, function。

【讨论】：