在循环中删除多个 JSON 对象

Question

我正在尝试创建一个循环，根据是否有任何 <p> 元素具有选定的类，从我的 JSON 数组中删除 JSON 对象。

所以，我希望它如何工作是在提交表单时检查是否有任何<p> 元素具有选定的类。如果选择了任何元素，我会使用它们的文本值循环遍历它们以从 JSON 数组中删除它们，然后我 console.log() 数组。

我可以使用循环内的代码从数组中删除单个对象，但我似乎无法让它与我的循环一起使用。我怎样才能做到这一点？

JS

$('#form').on('submit', function(e){
    e.preventDefault();

    if( $('.postcodes p.selected').length ){
        $('.postcodes p.selected').each(function(){
            var data_filter = area_json.filter((element) => {
                return element.Sector !== $(this).text();
            });
        });
    }

    console.log(data_filter); 
}); 

var area_json = [
    {
       "Sector": "AB10 1",
       "Locality": "Thistle Court,Aberdeen",
       "Residential": 1147
    },
    {
       "Sector": "AB10 6",
       "Locality": "Great Western Road,Aberdeen",
       "Residential": 4596
    },
    {
       "Sector": "AB10 7",
       "Locality": "Holburn Street,Aberdeen",
       "Residential": 4380
    }
]

HTML

<form id="form" action="" method="post">
    <div class="postcodes">
        <p class="selected">AB10 1</p>
        <p class="selected">AB10 6</p>
    </div>
    <input type="submit" value="submit">
</form>

Answer 1

试试这样。在您的.each 循环中尝试推送数据，在过滤器中您可以检查.indexOf()。这会给你结果。

我将.filter 移出.each 循环。因为循环内循环是个坏主意，而且会消耗时间。

var area_json = [
    {
       "Sector": "AB10 1",
       "Locality": "Thistle Court,Aberdeen",
       "Residential": 1147
    },
    {
       "Sector": "AB10 6",
       "Locality": "Great Western Road,Aberdeen",
       "Residential": 4596
    },
    {
       "Sector": "AB10 7",
       "Locality": "Holburn Street,Aberdeen",
       "Residential": 4380
    }
];
$('#form').on('submit', function(e){
    e.preventDefault();

    if( $('.postcodes p.selected').length ){
      var data = [];
        $('.postcodes p.selected').each(function(){
            data.push($(this).text());
        });
       var data_filter = area_json.filter((element) => {
        return (data.indexOf(element.Sector)<0)
       });
    }

    console.log(data_filter); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form" action="" method="post">
    <div class="postcodes">
        <p class="selected">AB10 1</p>
        <p class="selected">AB10 6</p>
    </div>
    <input type="submit" value="submit">
</form>

Answer 2

您可以通过简单地执行[...$('.selected')].map(p => $(p).text()) 来检索选定的选项.text()，而不是您可以过滤掉那些已经通过includes() 方法选择的area_json 数组项

var area_json = [
    {
       "Sector": "AB10 1",
       "Locality": "Thistle Court,Aberdeen",
       "Residential": 1147
    },
    {
       "Sector": "AB10 6",
       "Locality": "Great Western Road,Aberdeen",
       "Residential": 4596
    },
    {
       "Sector": "AB10 7",
       "Locality": "Holburn Street,Aberdeen",
       "Residential": 4380
    }
];

const res = area_json.filter(item => ![...$('.selected')].map(p => $(p).text()).includes(item.Sector));

console.log(res);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form" action="" method="post">
    <div class="postcodes">
        <p class="selected">AB10 1</p>
        <p class="selected">AB10 6</p>
    </div>
    <input type="submit" value="submit">
</form>

Answer 3

你需要使用 each(function(index, item) 和 $(item).text() ，在每个里面移动控制台。

 if( $('.postcodes p.selected').length ){
        $('.postcodes p.selected').each(function(index, item){
            var data_filter = area_json.filter((element) => {
                return element.Sector !== $(item).text();
            });
             console.log(data_filter); 
        });
    }

$('#form').on('submit', function(e){
    e.preventDefault();
    var data_filter = [];
    if( $('.postcodes p.selected').length ){
        $('.postcodes p.selected').each(function(index, item){
            data_filter = area_json.filter((element) => {
                return element.Sector !== $(item).text();
            });
            
        });
    }

    console.log(data_filter); 
}); 

var area_json = [
    {
       "Sector": "AB10 1",
       "Locality": "Thistle Court,Aberdeen",
       "Residential": 1147
    },
    {
       "Sector": "AB10 6",
       "Locality": "Great Western Road,Aberdeen",
       "Residential": 4596
    },
    {
       "Sector": "AB10 7",
       "Locality": "Holburn Street,Aberdeen",
       "Residential": 4380
    }
]

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form" action="" method="post">
    <div class="postcodes">
        <p class="selected">AB10 1</p>
        <p class="selected">AB10 6</p>
    </div>
    <input type="submit" value="submit">
</form>

Answer 4

这是我拼凑的一个工作版本：

$(document).ready(function() {

  var data_filter = [];
  var data_filterChecked = [];

  $('#form').on('submit', function(e) {
    e.preventDefault();
    data_filterChecked = [];

    if ($('.postcodes p.selected').length) {
      $('.postcodes p.selected').each(function(i, element) {
        var lookingFor = $(element).text();
        data_filter = area_json.filter((element) => {
          if (element.Sector !== lookingFor) {
            data_filterChecked.push(element);
          }

        });

      });
      data_filter = data_filterChecked;
    }

    console.log(data_filter);
  });

  var area_json = [{
      "Sector": "AB10 1",
      "Locality": "Thistle Court,Aberdeen",
      "Residential": 1147
    },
    {
      "Sector": "AC10 6",
      "Locality": "Great Western Road,Aberdeen",
      "Residential": 4596
    },
    {
      "Sector": "AB10 7",
      "Locality": "Holburn Street,Aberdeen",
      "Residential": 4380
    }
  ]

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<form id="form" action="" method="post">
  <div class="postcodes">
    <p class="selected">AB10 1</p>
    <p class="selected">AB10 1</p>
  </div>
  <input type="submit" value="submit">
</form>