JS array find values

Question

Подскажите пожалуйста, почему если добавить в поиск значения else то span не заполняется? Если оставить только if, то все работает. Без 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>
<span id="county"></span>
<input type="text" class="phone">

С 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">

Answer 1

В приведенном коде некорректно используется метод .filter

Данный метод предназначен для получения из коллекции элементов, удовлетворяющих условиям.

Поэтому передаваемый callback должен возвращать либо true либо false, чтобы можно было определить подходит элемент под условия или нет.

Метод filter всегда проходит по всем элементам, поэтому в случае с else, если нужный элемент не последний результатом всегда будет no.

Так как ищется всего один элемент, вместо .filter стоит воспользоваться методом .find

var el = phones.find(function(phone) {
    return (phone.code == val);
});

Здесь, в el будет либо найденный элемент либо null.

var phones = [{
    "country": "UA",
    "code": "+380"
  },
  {
    "country": "RU",
    "code": "+7"
  },
  {
    "country": "MD",
    "code": "+373"
  }
];
$(".phone").keyup(function() {
  var val = $(this).val();
  var el = phones.find(function(phone) {
    return (phone.code == val);
  });
  $("#county").text(el?.country ?? '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">

Answer 2

Вариант без jQuery.

var phones = [{
    "country": "UA",
    "code": "+380"
  },
  {
    "country": "RU",
    "code": "+7"
  },
  {
    "country": "MD",
    "code": "+373"
  }
];

document.querySelector('input.phone').addEventListener('keyup', e =>{
        document.querySelector('#country').textContent = 
            phones.find(el => el.code === e.target.value)?.country ?? 'no';
})

<span id="country"></span>
<input type="text" class="phone">

БЛОГ НА HUSL

JS array find values

Ответы (2 шт):