更好，更干净的方式来写这段代码?

Question

我对编码相当陌生，想要一种更好(更少重复)的方式来为我的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

谢谢你的时间来阅读!

Answer 1

使用<p>段落代替中间有许多换行符的文本节点。

你可以很容易地在循环中创建它们:

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