Nested loop issue with if statment

Question

I need help with this nested for loops with if statement. What i want to do is to show only this li's on site which are included in resultFlats array of objects (resultFlats[i].id). Now its not working properly.

Getting number id from li and id from resultFlats are working fine, but there is sth wrong with if statement

var arrayFlats = $('.search-my-house');
// e.g.
var resultFlats = [
  {
    name: "test",
    id: "1"
  },
  {
    name: "test2",
    id: "4"
  }
]

for (var j = 0; j < arrayFlats.length; j++) {
    var number;
    number = $(arrayFlats[j]).children('.apartment-number').text();
    number = number.replace(/\s/g, "");
    number = Number(number);
    for (var i = 0; i < resultFlats.length; i++) {
        var showId = Number(resultFlats[i].id)
        if(showId === number) {
            $(arrayFlats[j]).css('display', 'flex')
        } else {
            $(arrayFlats[j]).css('display', 'none')
        }
    };
};

<li class="search-my-house" data-loggia="" data-taras="1">
    <div class="col description-small text-bold all-apartments apartment-number">22</div>
    <div class="col description-small text-bold all-apartments levels">piętro 1</div>
    <div class="col description-small text-bold all-apartments rooms">4</div>
    <div class="col description-small text-bold all-apartments">168m<sup>2</sup></div>
    <div class="col description-small text-bold all-apartments is-occupied">free</div>
    <div class="col description-small">
        <a href="wolne" class="button secondary">
            <span>download</span>
        </a>
    </div>
</li>

<li class="search-my-house" data-loggia="" data-taras="1">
    <div class="col description-small text-bold all-apartments apartment-number">1</div>
    <div class="col description-small text-bold all-apartments levels">piętro 1</div>
    <div class="col description-small text-bold all-apartments rooms">4</div>
    <div class="col description-small text-bold all-apartments">168m<sup>2</sup></div>
    <div class="col description-small text-bold all-apartments is-occupied">free</div>
    <div class="col description-small">
        <a href="wolne" class="button secondary">
            <span>download</span>
        </a>
    </div>
</li>

<li class="search-my-house" data-loggia="" data-taras="1">
    <div class="col description-small text-bold all-apartments apartment-number">184</div>
    <div class="col description-small text-bold all-apartments levels">piętro 1</div>
    <div class="col description-small text-bold all-apartments rooms">4</div>
    <div class="col description-small text-bold all-apartments">168m<sup>2</sup></div>
    <div class="col description-small text-bold all-apartments is-occupied">free</div>
    <div class="col description-small">
        <a href="wolne" class="button secondary">
            <span>download</span> 
        </a>
    </div>
</li>

score 1 · Accepted Answer · answered Sep 21 '17 at 09:55

1

You need to add a break statement so that when your condition is matched the loops breaks and the css for other resultFlats are not affected by the else statement. So, do like this:

if(showId === number)
{
   $(arrayFlats[j]).css('display', 'flex');
   break;
} 
else 
{
   $(arrayFlats[j]).css('display', 'none')
}

answered Sep 21 '17 at 09:55

Ankit Agarwal

30,378
5
37
62

1

Please using `break`, `goto`, `continue` ... keywords kill the flow of the code and are hard to read. [look here](https://softwareengineering.stackexchange.com/questions/58237/are-break-and-continue-bad-programming-practices), [here](https://stackoverflow.com/questions/3922599/is-it-a-bad-practice-to-use-break-in-a-for-loop). – Orelsanpls Sep 21 '17 at 09:59
Glad to help you @user2508736 – Ankit Agarwal Sep 21 '17 at 11:53

score 0 · Answer 2 · answered Sep 21 '17 at 10:49

Idea is: 1. Hide all the element first, then show the matching one Implement

var resultFlats = [
  {
    name: "test",
    id: "1"
  },
  {
    name: "test2",
    id: "4"
  }
]
$('.search-my-house').css('display', 'none');
for (var i = 0; i < resultFlats.length; i++) {
  var showId = Number(resultFlats[i].id);
  $('.search-my-house').each(function() {
    var number = $('.apartment-number', this).text().replace(/\s/g, "");
    number = Number(number);
      if(showId === number) {
        $(this).css("display", 'flex');
      };
  });
}

Nested loop issue with if statment

2 Answers2