JS array find values

Question

Please tell me why if you add a value to the search, then the span is not filled? If you leave only the if, then everything works. I can't understand what the problem might be, since this is a common condition, if the code is found, then it displays the country in the span.

Without the else:

var phones = [{
    "country": "UA",
    "code": "+380"
  },
  {
    "country": "RU",
    "code": "+7"
  },
  {
    "country": "MD",
    "code": "+373"
  }
];
$(".phone").keyup(function() {
  var val = $(this).val();
  phones.find(function(phones) {
    if (phones.code == val) {
      $("#county").text(phones.country);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="county"></span>
<input type="text" class="phone">

With else:

var phones = [{
    "country": "UA",
    "code": "+380"
  },
  {
    "country": "RU",
    "code": "+7"
  },
  {
    "country": "MD",
    "code": "+373"
  }
];
$(".phone").keyup(function() {
  var val = $(this).val();
  phones.find(function(phones) {
    if (phones.code == val) {
      $("#county").text(phones.country);
    } else {
      $("#county").text("no");
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="county"></span>
<input type="text" class="phone">

Im pretty sure declaring var phones at the top prevents it from inheriting in the closure scope. — Sherif
– Sherif, Commented Jul 21, 2021 at 8:55

Costa · Accepted Answer · 2021-07-21 09:17:40Z

Because .find is looping through all your objects. If you search for lets say +7, it will show no then RU then no again, so it overwrites the value while without the else it gets in once and stays like that without replacing.

The solution here is to finish with your find first, and then do the if.

I would do something like this:

var phones = [{
    "country": "UA",
    "code": "+380"
},
{
    "country": "RU",
    "code": "+7"
},
{
    "country": "MD",
    "code": "+373"
}
];
$(".phone").keyup(function () {
    var val = $(this).val();
    var phoneObj = phones.find(x => x.code == val);

    if (phoneObj == undefined) {
        $("#county").text("no");
    }
    else {
        $("#county").text(phoneObj.country);
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <span id="county"></span>
  <input type="text" class="phone">

brk · Accepted Answer · 2021-07-21 09:05:24Z

1

That is because the next value is not same as the input code, so the else loop is executed & shows no.

Explanation: The array method iterates all the object. So when the input matches it shows the country. But when the next object is under iteration it does not match with the input value. Hence the previous text is over written.

The input is +7 and matches with the code and showing the country. But immediately after that +7 is compared with next object and the code does not match. So else loop is executed.

When using only if nothing happens when the code and input value does not match.

edited Jul 21, 2021 at 9:05

answered Jul 21, 2021 at 8:59

brk

50.3k10 gold badges59 silver badges85 bronze badges

Collectives™ on Stack Overflow

JS array find values

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