не могу использовать find, чтобы получить конкретный элемент массива, который удовлетворяет моей функции

Question

, поэтому у меня есть селектор, который содержит несколько опций, и ниже у меня есть абзац, содержание которого будет меняться в соответствии с выбранной опцией в меню выбора. Я использовал метод find для обхода массива и возврата элемента (который является объектом), который удовлетворяет функции find. однако есть проблема с методом поиска, которую я не смог выяснить.

'use strict';

{
  function fetchJSON(url, cb) {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.responseType = 'json';
    xhr.onload = () => {
      if (xhr.status < 400) {
        cb(null, xhr.response);
      } else {
        cb(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`));
      }
    };
    xhr.onerror = () => cb(new Error('Network request failed'));
    xhr.send();
  }

  function createAndAppend(name, parent, options = {}) {
    const elem = document.createElement(name);
    parent.appendChild(elem);
    Object.keys(options).forEach(key => {
      const value = options[key];
      if (key === 'text') {
        elem.textContent = value;
      } else {
        elem.setAttribute(key, value);
      }
    });
    return elem;
  }

  function createLI(root, sel, options = []) {
    const select = document.createElement(sel);

    root.appendChild(select);
    select.innerHTML = options.sort().map(repo => `<option value="${repo.id}">${repo.name}</option>`).join('\n');
 select.addEventListener("change", function () {
      const chosenRepoId = this.value;
      const selectedRepo = options.find(repo => repo.id === chosenRepoId);


      document.getElementById('repoInfo').innerHTML = selectedRepo.description;
    });
  }

  function main(url) {
    fetchJSON(url, (err, data) => {
      const root = document.getElementById('root');
      if (err) {
        createAndAppend('div', root, { text: err.message, class: 'alert-error' });
      } else {
        // createAndAppend('pre', root, { text: JSON.stringify(data, null, 2) });
        createLI(root, 'select', data);
      }
    });
  }

  const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';

  window.onload = () => main(HYF_REPOS_URL);
}

````js

Answer 1

this.value возвращает строку.

В сравнении - const selectedRepo = options.find(repo => repo.id === chosenRepoId);

вы используете оператор strict equality, а ваш chosenRepoId является числовым.Итак, сначала преобразуйте выбранное значение в число (используйте + или parseInt).

const chosenRepoId = +this.value; 
const selectedRepo = options.find(repo => repo.id === chosenRepoId);