Question

我想从JavaScript中的localhost文件中获取元素（使用.json）。

然后我想将该数据附加到按钮上。我知道如何将变量附加到按钮，标题等上没什么大不了的。

我的主要问题是能否从我的JavaScript文件中的JSON文件中获取.json数据。

function loadData() {
    $.getJSON('jData.json', function(json) {
        console.log(json); // this will show the object in the console.
    });
}

这是我html文件中的脚本。

Answer 1

要迭代JSON中的键，可以使用jQuery的{{3}}方法。

function loadData() {
  $.getJSON('jData.json', function(json) {
    $.each(json, (i, el) => {
      console.log(el); // Individual elements
    });
  });
}

工作示例：

$(document).on('click', '.close', (e) => {
  $(e.target).parent().hide('slow', function(){$(e.target).parent().remove(); });;
});

function loadData() {
  $.getJSON('https://www.json-generator.com/api/json/get/bOXjMGvgZe?indent=2', function(json) {
    $.each(json, (i, el) => {
      $('.tags').append(`<span class="tag">${el.key}<span class="close">x</span></span>`);
    });
  });
}

loadData();

.tags {
  padding: 20px;
}

.tag {
  border-radius: 5px;
  display: block;
  width: 150px;
  margin: 5px;
  padding: 2.5px;
  background: #34495e;
  color: white;
  text-align: center;
}

.tag > .close {
  float: right;
  background: #e74c3c;
  padding-left: 2px; padding-right: 2px;
  border-radius: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tags"></div>

在JavaScript中显示.json文件中的单个元素

1 个答案: