Проект Github profiles - проблема с null и карточками

Question

Проект Github profiles - проблема с null и карточками

Рейтинг: 0Ответов: 1Опубликовано: 13.01.2023

Всем доброго времени суток! Хотела бы задать свой очередной вопрос. Сделала учебный проект, но осталось 2 проблемы, с которыми долбалась пару дней, но так и не удалось решить.

Проблема с null. У некоторых потребителей видимо отсутствует вся информация и выдает null. Например, если ввести adam, то есть инфа по всем трем пунктам- name, city, about. А если, например, ввожу какие-то произвольные буквы, типа hfghfg, то ясное дело, что инфы может и не быть. Хотелось бы чтобы вместо null писалось No info. У меня была схожая ситуация и я попробовала использовать parseInt, но теперь мне пишет No info для всех карточек, даже для тех, у кого есть инфо. Свои попытки я покажу ниже.
Вторая проблема касается закрытия карточек. Например, когда я пишу adam (или что-то еще) в поиске, нажимаю на Search- открывается карточка с пользователем adam (ну или с тем пользователем, которого ввела). Затем я пишу еще что-то в поиске, опять нажимаю Search и ожидаю, что первая карточка закроется. Но нет- вторая карточка просто открывается под первой, а первая никуда не девается. В данном случае у меня даже нет предположений, как бы это можно было б исправить. Возможно надо вставить какую-то функцию, которая бы при введении нового пользователя в Search закрывала бы первую карточку. Но вот вопрос какую функцию и в какое место кода ее вставить-если вообще дело в этом. Подскажите пожалуйста. А вот сам код:

const mainEl = document.querySelector(".main");
const wrapper = document.createElement("div");
const formEl = document.createElement("form");
formEl.addEventListener("submit", async (e) => {
  e.preventDefault();
  const inputsValue = Object.fromEntries(new FormData(e.target));
  const response = await fetch(`
https://api.github.com/users/${inputsValue.name}`);

  if (response.ok) {
    const data = await response.json();
    wrapper.appendChild(createProfileEl(data));
    mainEl.appendChild(wrapper);
    inputEl.value = "";
  } else {
    alert("The user is not found");
  }
});

const inputEl = document.createElement("input");
inputEl.classList.add("search-input");
inputEl.setAttribute("name", "name");

const searchButtonEl = document.createElement("button");
searchButtonEl.classList.add("search-button");
searchButtonEl.setAttribute("type", "submit");
searchButtonEl.innerHTML = "Search";

formEl.appendChild(inputEl);
formEl.appendChild(searchButtonEl);
mainEl.appendChild(formEl);

function createProfileEl(profileData) {
  const element = document.createElement("div");
  element.classList.add("profile");

  element.innerHTML = `
  <img class="search-image" src=${profileData.avatar_url}></img> 
  <span>Name: </span>
  ${
    parseInt(profileData.name)
      ? `
             <p class="search-text">${createProfileEl(profileData.name)}">${
          profileData.name
        }</p>
           `
      : "No info"
  }
<br><span>City: </span>
${
  parseInt(profileData.location)
    ? `
           <p class="search-text">${createProfileEl(profileData.location)}">${
        profileData.location
      }</p> 
           `
    : "No info"
}
<br><span>About: </span>
${
  parseInt(profileData.bio)
    ? `
           <p class="search-text">${createProfileEl(profileData.bio)}">${
        profileData.bio
      }</p>
           `
    : "No info"
}`;
  element.appendChild(createDeleteBtnEl());
  return element;
}

function createDeleteBtnEl() {
  const element = document.createElement("button");
  element.classList.add("close-button");
  element.innerText = "Close";
  element.addEventListener("click", (e) => {
    wrapper.innerHTML = "";
  });
  return element;
}

javascript null closeevent

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

Ну так перед рендером сделайте проверку на null.

element.innerHTML = `
  <span>Name: ${profileData.name || "No name"}</span>
`

И позвольте спросить, а зачем вам в этом случае parseInt? Вы вообще знаете, как эта ф-я работает? Если нет, тогда почитайте на MDN.

parseInt(profileData.name)

Такое чувство, будто код вовсе не вы писали, и понятия не имеете, как он работает.

if (response.ok) {
  const data = await response.json();
  // Вот здесь же прямым текстом написано, что карточки добавляются
  // Просто вместо этого заменяйте содержимое новой карточкой
  wrapper.appendChild(createProfileEl(data));
  mainEl.appendChild(wrapper);
  
  // Например так
  // wrapper.innerHTML = ""
  // mailEl.innerHTML = ""

  // wrapper.appendChild(createProfileEl(data))
  // mainEl.appendChild(wrapper)

  inputEl.value = "";
} else {
  alert("The user is not found");
}

Про полезность wrapper ещё можно поспорить. Если в mainEl находится что-либо ещё, кроме карточки польхователя, тогда полное очищение не подойдёт. Нужно смотреть на структуру и думать. Например, у вас есть кнопка удаления карточки -- можно перед рендером новой сначала удалять старую. Или не добавлять wrapper какждый раз в mainEl, а просто сделать контейнером для карточек. Пример:

<main>
  <form id="searchForm"><!-- ... --></form>
  <div class="cards-container"><!-- и пихать карточки сюда --></div>
</main>

Проект Github profiles - проблема с null и карточками

Ответы