撰寫此代碼的更好、更簡潔的方式？

我對編碼相當陌生，并且想要一種更好（更少重復）的方式來為我的 fetch 呼叫創建這行代碼。我將添加代碼的重要部分。

HTML

<form id= 'selectionForm' action="#">
                    <p>
                      <label>
                        <input type="checkbox" class="filled-in" name="Nexflix" id="Nexflix"/>
                        <span>Netflix</span>
                      </label>
                    </p>
</form>

Javascript

document.getElementById('fetch').addEventListener('click', function (element) {
  element.preventDefault();
  let checkedElements = document.querySelectorAll('#Nexflix:checked');
  var options = {
    method: "GET",
    headers: {
      "X-RapidAPI-Key": "using my own",
      "X-RapidAPI-Host": "streaming-availability.p.rapidapi.com",
    },
  };
  let outputContainer = document.getElementById('output');

  for (let e of checkedElements) {
      fetch('https://streaming-availability.p.rapidapi.com/search/basic?country=us&service=netflix&service=netflix&type=movie&genre=18&page=1&output_language=en&language=en', options).then((response) => response.json()).then( (data) => {
       
          outputContainer.appendChild(document.createTextNode('The checked element is : ' e.id));
          outputContainer.appendChild(document.createElement("br"));
          outputContainer.appendChild(document.createTextNode(data.results[0].title));
          outputContainer.appendChild(document.createElement("br"));
          outputContainer.appendChild(document.createTextNode('IMDB  Rating : '   data.results[0].imdbRating));
          outputContainer.appendChild(document.createElement("br"));
          outputContainer.appendChild(document.createTextNode('Year of release : '   data.results[0].year));
          outputContainer.appendChild(document.createElement("br"));
          outputContainer.appendChild(document.createTextNode('Overview : '   data.results[0].overview));
          outputContainer.appendChild(document.createElement("br"));     
          outputContainer.appendChild(document.createTextNode(data.results[1].title));

我還想對 API 的其他電影/結果重復這一點。他們給出的結果像

{2 items
"results":[8 items
0:{21 items
"age":10
"backdropPath":"/pYziM5SEmptPW0LdNhWvjzR2zD1.jpg"
"backdropURLs":{...}4 items
"cast":[...]4 items
"countries":[...]1 item
"genres":[...]2 items
"imdbID":"tt9850370"
"imdbRating":64
"imdbVoteCount":1069
"originalTitle":"#AnneFrank. Parallel Stories"
"overview":"One single Anne Frank moves us more than the countless others who suffered just as she did but whose faces have remained in the shadows-Primo Levi. The Oscar?-winning Helen Mirren will introduce audiences to Anne Frank's story through the words in her diary. The set will be her room in the secret refuge in Amsterdam, reconstructed in every detail by set designers from the Piccolo Theatre in Milan. Anne Frank this year would have been 90 years old. Anne's story is intertwined with that of five Holocaust survivors, teenage girls just like her, with the same ideals, the same desire to live: Arianna Sz?renyi, Sarah Lichtsztejn-Montard, Helga Weiss and sisters Andra and Tatiana Bucci. Their testimonies alternate with those of their children and grandchildren."
"posterPath":"/hkC4yNDFmW1yQuQhtZydMeRuaAb.jpg"
"posterURLs":{...}7 items
"runtime":92
"significants":[...]2 items
"streamingInfo":{...}1 item
"tagline":""
"title":"#AnneFrank. Parallel Stories"
"tmdbID":"610643"
"video":"FzT7-NfkxLA"
"year":2019
}
1:{...}21 items
2:{...}21 items
3:{...}21 items
4:{...}21 items
5:{...}21 items
6:{...}21 items
7:{...}21 items

感謝您花時間閱讀本文！

uj5u.com熱心網友回復：

使用<p>aragraphs 而不是中間有許多換行符的文本節點。

您可以在回圈中輕松創建它們：

const lines = [
    'The checked element is : ' e.id,
    data.results[0].title,
    'IMDB  Rating : '   data.results[0].imdbRating,
    'Year of release : '   data.results[0].year,
    'Overview : '   data.results[0].overview,
    data.results[1].title
];
for (const line of lines) {
    const paragraph = document.createElement('p');
    paragraph.appendChild(document.createTextNode(line));
    outputContainer.appendChild(paragraph);
}

標籤：javascript for循环 获取 API

上一篇：單擊影像時需要顯示隱藏文本

下一篇：發生某些事件后如何禁用KOJS中的按鈕？