Filter array values before loop

Question

I have one array with the same ids of my div data-id: i need to do a loop for my array only for values without the class ".empty-box". In this case I need to cicle my array with value id 1, 2 and 3 because 4 and 5 have the same value of the div empty-box.

<div class="box" data-id="1"> </div>
<div class="box" data-id="2"> </div>
<div class="box" data-id="3"> </div>
<div class="box empty-box" data-id="4"> </div>
<div class="box empty-box" data-id="5"> </div>

var emptyBoxes = $('.empty-box')
var myArray = [
  {id:1},
  {id:2},
  {id:3},
  {id:4},
  {id:5}
]

My solution look like this, but I'm not sure is the best way:

var myArray = [
  {id:1},
  {id:2},
  {id:3},
  {id:4},
  {id:5}
]

var emptyBoxes = $('.empty-box');

var ids = [];

emptyBoxes.each(function(i, v){
    ids.push($(v).data('id'));
})

var list = myArray.filter(function(el) {return !ids.includes(el.id)};

Have you got any solution?

Slava Knyazev · Accepted Answer · 2021-10-25 20:17:07Z

1

With jQuery, you have access to the :not selector.

const nonEmptyBoxes = $('.box:not(.empty-box)');

answered Oct 25, 2021 at 20:17

Slava Knyazev

6,0991 gold badge27 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Willi Pasternak · Accepted Answer · 2021-10-25 20:22:09Z

You could use document.querySelectorAll('div.box[data-id]:not(.empty-box)') to get all the boxes that aren´t empty and have an id.

I´ve added an Example to show the speed difference.

var myArray = [
  {id:1},
  {id:2},
  {id:3},
  {id:4},
  {id:5}
]
console.time('old');
var emptyBoxes = $('.empty-box');

var ids = [];

emptyBoxes.each(function(i, v){
    ids.push($(v).data('id'));
})

var list = myArray.filter(function(el) {return !ids.includes(el.id)});
console.log(list);
console.timeEnd('old');
console.time('new');
const validBoxes = document.querySelectorAll('div.box[data-id]:not(.empty-box)');
let newList = [];
validBoxes.forEach((element) => {newList.push({id: element.getAttribute('data-id')})});
console.log(newList);
console.timeEnd('new');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box" data-id="1"> </div>
<div class="box" data-id="2"> </div>
<div class="box" data-id="3"> </div>
<div class="box empty-box" data-id="4"> </div>
<div class="box empty-box" data-id="5"> </div>

Collectives™ on Stack Overflow

Filter array values before loop

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related