Removing multiple JSON objects inside a loop

Question

I am trying to create a loop that removes JSON objects from my JSON array based on whether any <p> elements have the selected class.

So, how I want it to work is when the form is submitted I check to see if any <p> elements have the selected class. If any of the elements are selected I loop through them using their text value to remove them from the JSON array, then I console.log() the array.

I am able to remove a single object from the array using the code inside the loop but I can't seem to get it to work with my loop. How can I achieve this?

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>

Syed mohamed aladeen · Accepted Answer · 2019-06-14 11:26:34Z

Try like this. in your .each loop try push the data and in filter you can check .indexOf(). this will give you the result.

I moved .filter out of .each loop. because loop inside loop is a bad idea and it will consume time.

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>

Yevhen Horbunkov · Accepted Answer · 2019-06-14 11:01:46Z

1

You may retrieve selected options .text() by simply doing [...$('.selected')].map(p => $(p).text()), than you may filter out those area_json array items that are already selected by means of includes() method

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>

edited Jun 14, 2019 at 11:01

answered Jun 14, 2019 at 10:56

Yevhen Horbunkov

15.6k3 gold badges27 silver badges46 bronze badges

5 Comments

Reece Over a year ago

Seems to work perfectly thanks. But what are the three dots about just before $('.selected')? if I remove them it doesn't work properly

Yevhen Horbunkov Over a year ago

That's a spread syntax to turn iterable jQuery object into array, so you can apply .map() method

Yevhen Horbunkov Over a year ago

You may do Array.from($('.selected')) instead, if you don't like that tripple dot thing for some reason

Yevhen Horbunkov Over a year ago

...or, even $('.selected').toArray() ...somebody, stop me, please

Yevhen Horbunkov Over a year ago

And just one more little thing, if the number of selected <p> is large enough and you're willing to sacrifice conciseness for performance, you may assign [...$('.selected')].map(p => $(p).text()) to the variable outside of .filter() not to do extra looping

Hien Nguyen · Accepted Answer · 2019-06-14 11:01:48Z

1

You need use each(function(index, item) and $(item).text() , move console inside each.

 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>

edited Jun 14, 2019 at 11:01

answered Jun 14, 2019 at 10:53

Hien Nguyen

19k7 gold badges57 silver badges70 bronze badges

2 Comments

Reece Over a year ago

Thanks but I need to return a single JSON array so I can filter it again without any of the selected values inside it

Hien Nguyen Over a year ago

I update answer, create a variable outside of each scope

tamak · Accepted Answer · 2019-06-14 11:22:46Z

here is a working version I threw together:

$(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>

Collectives™ on Stack Overflow

Removing multiple JSON objects inside a loop

4 Answers 4

Comments

5 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

5 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related