Отображение результатов из ответа JSON в зависимости от типа игры


Этот код работает без ошибок. Я хочу знать, если есть способ, чтобы улучшить его структуру conding, так как там много повторов и это выглядит действительно плохо. Я попробовал альтернативный способ с помощью параметра для обработки типа игры, но он нарушил кодекс полностью.

Что бы быть лучший способ сделать этот код короче или просто общее улучшение?

   $(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) { //On success we do something
                let data = response;

                let ul1 = $('.ajax')[0];
                let ul2 = $('.ajaxCheck')[0];
                let ul3 =$('.compNew')[0]
                let ul4 = $('.new')[0];

                if (ul1 || ul4) {
                    $(ul1).html(displayOutput(data, false));
                    $(ul4).html(displayNewOutput(data, false));
                } else {
                    $(ul2).html(displayOutputHome(data, true));

                }


                if (ul3) {

                $(ul3).html(displayNewGames(data, true));


                }

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



    }   


    });


Комментарии