البحث عبارة عن سلسلة فارغة أو لا يوجد تطابق من استدعاء API

0

كيف يمكنني التقاط رسالة وطباعتها للمستخدم إذا كان البحث عبارة عن سلسلة فارغة أو تعذر العثور على أي تطابق من api على القيمة في حقل الإدخال.

// show the search results from user input
const searchTvShows = ({ target }) => {
    fetch(`https://api.tvmaze.com/search/shows?q=${target.value}`)
        .then(blob => blob.json())
        .then(shows => {
        const app = document.getElementById('app');
        app.innerHTML = shows.map(({ show }) => `
            <div class="col-sm movie-content">
                <div class="movie-image">
                    ${show.image ? `<img src="${show.image.medium}">` : `<img class="fallbackImage"src="design/icons/No_image_available.svg">`}
                </div>
                <div class="movie-info">
                    <h1>${show.name}</h1>
                </div>
          </div>

        `).join(' ');
    })
  }

1 إجابة

1
افضل جواب

لقد تحققت للتو ، وتعرض واجهة برمجة التطبيقات الخاصة بك صفيفًا فارغًا عندما يكون هناك بحث ناجح عن عدم تطابق ، لذلك:

if (shows.length) {
    // do what you're doing
} else {
    // show a message saying there were no matches
}

في السياق ، وكذلك التعامل مع القضايا التي ذكرتها في تعليقي :

const searchTvShows = ({ target }) => {
  fetch(`https://api.tvmaze.com/search/shows?q=${target.value}`)
      .then(response => {
        if (!response.ok) {
          throw new Error();
        }
        return response;
      })
      .then(blob => blob.json())
      .then(shows => {
        const app = document.getElementById('app');
        if (shows.length) {
          app.innerHTML = shows.map(({ show }) => `
              <div class="col-sm movie-content">
                  <div class="movie-image">
                      ${show.image ? `<img src="${show.image.medium}">` : `<img class="fallbackImage"src="design/icons/No_image_available.svg">`}
                  </div>
                  <div class="movie-info">
                      <h1>${show.name}</h1>
                  </div>
            </div>
          `).join(' ');
        } else {
          app.innerHTML = "<em>No matching shows</em>";
        }
      })
      .catch(err => {
        // Report the error or similar
      })
}

يمكنك تجنب if / else إذا كان ذلك مهمًا لك (يبدو أنه بالنسبة للبعض) باستخدام || :

const searchTvShows = ({ target }) => {
  fetch(`https://api.tvmaze.com/search/shows?q=${target.value}`)
      .then(response => {
        if (!response.ok) {
          throw new Error();
        }
        return response;
      })
      .then(blob => blob.json())
      .then(shows => {
        const app = document.getElementById('app');
        app.innerHTML = shows.map(({ show }) => `
            <div class="col-sm movie-content">
                <div class="movie-image">
                    ${show.image ? `<img src="${show.image.medium}">` : `<img class="fallbackImage"src="design/icons/No_image_available.svg">`}
                </div>
                <div class="movie-info">
                    <h1>${show.name}</h1>
                </div>
          </div>
        `).join(' ') || "<em>No matching shows</em>"; // ***
      })
      .catch(err => {
        // Report the error or similar
      })
}

يعمل لأنه مع مجموعة فارغة ، .join(' ') سيعود "" وهو زائف وهكذا "" || "<em>...</em>" النتائج في "<em>...</em>" . ولكن إذا لم يكن الصفيف فارغًا ، فستكون لديك سلسلة غير فارغة ، والتي ستكون صحيحة.

:مؤلف

أسئلة ذات صلة

فوق
قائمة طعام