Better, cleaner way of writing this code?-CodePudding

I am fairly new to coding and wanted a better (less repetative) way of creating this line of code for my fetch call. I'll add the important parts of the code.

HTML

<form id= 'selectionForm' action="#">
                    <p>
                      <label>
                        <input type="checkbox"  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));

I would also like to repeat this for other films/results from the API. They give results like

{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

Thank you for your time reading this!

CodePudding user response：

Use <p>aragraphs instead of text nodes with many linebreaks inbetween.

You can create them easily in a loop:

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);
}