trjhtr

This code currently works with no errors. I want to know if there is a way to improve its conding structure, as there is a lot of repetition and it looks really bad. I tried an alternative way by using a parameter to handle the type of game, but it broke the code completely.

What would be the best way of making this code shorter or just overall improved?

 $(document).ready(() => //Make sure the document is done loading
 $.ajax( //Initialize the ajax object
 url: "data/games.json", //set the target url`
 type: "GET",
 dataType: 'JSON', //set the expected response type
 success: function(response) ,
 error: function() 
 console.error('Whoops something went wrong...');
 

 );

 const displayOutput = (games, hasCheckbox) => 


 let output = "";

 games.forEach(game => 


 if (game.Type === "Coming Soon" && game.ID <= 3) 


 let ratingDiv = $("<div class='rating'></div>");

 for (var i = 0; i < game.Rating; i++) 
 ratingDiv.append('<span class="fa fa-star checked"></span>');
 
 for (var i = game.Rating; i < 5; i++) 
 ratingDiv.append('<span class="fa fa-star"></span>');
 

 output += `

 <li>

 <li><a href=#><img class="frontGames" src="$game.image">
 <p><b>Name:</b>$game.Name<br>
 <b>Release Date:</b>$game.ReleaseDate</br>
 <b>Genres:</b>$game.Genres</br>
 <b>Retail Price:</b>$game.RetailPrice</br>
 <b>Rating:</b>$ratingDiv.html()</br></p></a>

 </li>`;

 

 )


 return output;

 


 const displayOutputHome = (games, hasCheckbox) => 




 //console.log(games[2]["Genres"]);
 //let ul = document.getElementById('ajax');
 let output = "";
 var x = 0;
 games.forEach(game => 

 if (game.Type === "Coming Soon") 

 x++;

 let ratingDiv = $("<div class='rating'></div>");

 for (var i = 0; i < game.Rating; i++) 
 ratingDiv.append('<span class="fa fa-star checked"></span>');
 
 for (var i = game.Rating; i < 5; i++) 
 ratingDiv.append('<span class="fa fa-star"></span>');
 

 output += `

 <li>
 <div class=""><input id="togg` + x + `" type="checkbox"><label for="togg` + x + `" class="$hasCheckbox ? 'visible' : 'invisible'">Compare</label></div></li>
 <li><a href=#><img class="frontGames" src="$game.image">
 <p><b>Name:</b>$game.Name<br>
 <b>Release Date:</b>$game.ReleaseDate</br>
 <b>Genres:</b>$game.Genres</br>
 <b>Retail Price:</b>$game.RetailPrice</br>
 <b>Rating:</b>$ratingDiv.html()</br></p></a>

 </li>`;

 


 )

 return output;

 
 const displayNewGames = (games, hasCheckbox) => 


 let output = "";


 games.forEach(game => 

 if (game.Type === "New Release") 

 var x = 100;

 x++;


 let ratingDiv = $("<div class='rating'></div>");

 for (var i = 0; i < game.Rating; i++) 
 ratingDiv.append('<span class="fa fa-star checked"></span>');
 
 for (var i = game.Rating; i < 5; i++) 
 ratingDiv.append('<span class="fa fa-star"></span>');
 


 //return true;

 output += `

 <li>
 <div class=""><input id="togg` + x + `" type="checkbox"><label for="togg` + x + `" class="$hasCheckbox ? 'visible' : 'invisible'">Compare</label></div></li>
 <li><a href=#><img class="frontGames" src="$game.image">
 <p><b>Name:</b>$game.Name<br>
 <b>Release Date:</b>$game.ReleaseDate</br>
 <b>Genres:</b>$game.Genres</br>
 <b>Retail Price:</b>$game.RetailPrice</br>
 <b>Rating:</b>$ratingDiv.html()</br></p></a>



 </li>`;

 


 )

 return output;




 


 let $compare = $(".visible");
 $compare.on("click", (event) => 
 $(event.currentTarget).text($(event.currentTarget).text() === "Item added" ? "Compare" : "Item added");
 ).on("click", (event) => 
 $(event.currentTarget).addClass("visible");
 ) 


 const displayNewOutput = (newReleased, hasCheckbox) => 

 let Newoutput = "";

 newReleased.forEach(game => 

 if (game.Type === "New Release" && game.ID >= 4) 


 let ratingDiv = $("<div class='rating'></div>");

 for (var i = 0; i < game.Rating; i++) 
 ratingDiv.append('<span class="fa fa-star checked"></span>');
 
 for (var i = game.Rating; i < 5; i++) 
 ratingDiv.append('<span class="fa fa-star"></span>');
 




 Newoutput += `

 <li>
 <li><a href=#><img class="frontGames" src="$game.image">
 <p><b>Name:</b>$game.Name<br>
 <b>Release Date:</b>$game.ReleaseDate</br>
 <b>Genres:</b>$game.Genres</br>
 <b>Retail Price:</b>$game.RetailPrice</br>
 <b>Rating:</b> $ratingDiv.html()</br></p></a>
 </li>`;


 

 )
 return Newoutput;



 


 );