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>

Ankit Agarwal · Accepted Answer · 2017-09-21 09:55:06Z

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, 2017 at 9:55

Ankit Agarwal

30.8k5 gold badges41 silver badges63 bronze badges

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

2 Comments

Orelsanpls Over a year ago

Please using break, goto, continue ... keywords kill the flow of the code and are hard to read. look here, here.

Ankit Agarwal Over a year ago

Glad to help you @user2508736

VinhNT · Accepted Answer · 2017-09-21 10:49:04Z

0

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');
      };
  });
}

answered Sep 21, 2017 at 10:49

VinhNT

1,1119 silver badges14 bronze badges

Collectives™ on Stack Overflow

Nested loop issue with if statment

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related