JSON数据结果重复

时间:2018-11-16 13:25:42

标签: jquery json

基本上,我有一些jQuery,它从JSON文件中提取数据。

目前还可以,但是可以复制数据。

例如,如果我输入“ NG8 6PL”,它将两次显示相同的地址。

这是我的代码。

$('#search').keyup(function() {
  $('#result').html('');
  var searchField = $('#search').val();
  var expression = new RegExp(searchField, "i");
  $.getJSON('https://api.myjson.com/bins/m0a3m', function(data) {

    $.each(data, function(key, value) {

      if (value.address.name.search(expression) != -1 || value.address.line1.search(expression) != -1 || value.address.town.search(expression) != -1 || value.address.county.search(expression) != -1 || value.address.postcode.search(expression) != -1) {
        $('#result').append('<li class="list-group-item link-class"><div class=""> ' + value.name + ' </div><div class=""> ' + value.address.name + '</div><div class=""> ' + value.address.line1 + '</div><div class=""> ' + value.address.town + '</div><div class=""> ' + value.address.county + '</div><div class=""> ' + value.address.postcode + '</div></li>');
        $('#result2').append('<li class="list-group-item link-class"><div class=""> ' + value.location.latitude + ' </div><div class=""> ' + value.location.longitude + ' </div><li>');
      }
    });
  });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
<input type="text" id="search">

<div class="row">
  <div class="col-sm-6">
    <ul id="result" class="list-unstyled"></ul>
  </div>
  <div class="col-sm-6">
    <ul id="result2" class="list-unstyled"></ul>
  </div>
</div>

0 个答案:

没有答案