locked
Removing Code Duplicate RRS feed

  • Question

  • User1022916497 posted

    How do you guys remove duplicates in your code? I did write a simple webpage that gets the current weather of the user, the user can also enter a location to get the weather from that location. It turns out that the code from my GET request do have similarity compared to my POST request. How do you guys clean this mess?


    @section Scripts {
        @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
        <script type="text/javascript" language="JavaScript">
            $(document).ready(function () {
                $.ajax({
                    type: "GET",
                    url: "/Index?handler=Weather",
                    contentType: "application/json",
                    dataType: "json",
                    success: function (response) {
                        document.getElementById("userLocation").innerHTML = response.cityName;
                                document.getElementById("currentTemp").innerHTML = Math.round(response.todaysTemp);
                                document.getElementById("umbrella").innerHTML = response.cloudiness + '%';
                                document.getElementById("wind").innerHTML = Math.round(response.windSpeed) + 'mps';
                                document.getElementById("sunrise").innerHTML = response.sunRise;
                                document.getElementById("sunset").innerHTML = response.sunSet;
                                document.getElementById("secondDay").innerHTML = Math.round(response.secondDayTemp);
                                document.getElementById("thirdDay").innerHTML = Math.round(response.thirddayTemp);
                                document.getElementById("fourthDay").innerHTML = Math.round(response.fourthdayTemp);
                                document.getElementById("fifthDay").innerHTML = Math.round(response.fifthdayTemp);
                                document.getElementById("secondDayImage").src = GetWeatherIcon(response.secondDayWeatherCondition);
                                document.getElementById("thirdDayImage").src = GetWeatherIcon(response.thirddayWeatherCondition);
                                document.getElementById("fourthDayImage").src = GetWeatherIcon(response.fourthdayWeatherCondition);
                                document.getElementById("fifthDayImage").src = GetWeatherIcon(response.fifthdayWeatherCondition);
                                document.getElementById("secondDayDescription").innerHTML = response.secondDayWeatherConditionDescription;
                                document.getElementById("thirdDayDescription").innerHTML = response.thirddayWeatherConditionDescription;
                                document.getElementById("fourthDayDescription").innerHTML = response.fourthdayWeatherConditionDescription;
                                document.getElementById("fifthDayDescription").innerHTML = response.fifthdayWeatherConditionDescription;
                    },
                    failure: function (response) {
                        alert(response);
                    }
                });
                $('#buttonSendLocation').on('click',
                    function () {
                        var locationCity = $('#Location').val();
                        $.ajax({
                            type: "POST",
                            url: "/Index?handler=SendLocation",
                            beforeSend: function (xhr) {
                                xhr.setRequestHeader("XSRF-TOKEN",
                                    $('input:hidden[name="__RequestVerificationToken"]').val());
                            },
                            data: JSON.stringify({
                                City: locationCity
                            }),
    
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            success: function (response) {
                                document.getElementById("userLocation").innerHTML = response.cityName;
                                document.getElementById("currentTemp").innerHTML = Math.round(response.todaysTemp);
                                document.getElementById("umbrella").innerHTML = response.cloudiness + '%';
                                document.getElementById("wind").innerHTML = Math.round(response.windSpeed) + 'mps';
                                document.getElementById("sunrise").innerHTML = response.sunRise;
                                document.getElementById("sunset").innerHTML = response.sunSet;
                                document.getElementById("secondDay").innerHTML = Math.round(response.secondDayTemp);
                                document.getElementById("thirdDay").innerHTML = Math.round(response.thirddayTemp);
                                document.getElementById("fourthDay").innerHTML = Math.round(response.fourthdayTemp);
                                document.getElementById("fifthDay").innerHTML = Math.round(response.fifthdayTemp);
                                document.getElementById("secondDayImage").src = GetWeatherIcon(response.secondDayWeatherCondition);
                                document.getElementById("thirdDayImage").src = GetWeatherIcon(response.thirddayWeatherCondition);
                                document.getElementById("fourthDayImage").src = GetWeatherIcon(response.fourthdayWeatherCondition);
                                document.getElementById("fifthDayImage").src = GetWeatherIcon(response.fifthdayWeatherCondition);
                                document.getElementById("secondDayDescription").innerHTML = response.secondDayWeatherConditionDescription;
                                document.getElementById("thirdDayDescription").innerHTML = response.thirddayWeatherConditionDescription;
                                document.getElementById("fourthDayDescription").innerHTML = response.fourthdayWeatherConditionDescription;
                                document.getElementById("fifthDayDescription").innerHTML = response.fifthdayWeatherConditionDescription;
                            },
                            failure: function (response) {
                                alert(response);
                            }
                        });
                    });
    
            });
    
            function GetWeatherIcon(weatherDescription) {
                if (weatherDescription === "clear sky") {
                    return "images/clear_sky.png";
                }
                if (weatherDescription === "few clouds") {
                    return "images/few_clouds.Cpng";
                }
                if (weatherDescription === "scattered clouds") {
                    return "images/scattered_clouds.png";
                }
                if (weatherDescription === "broken clouds") {
                    return "images/broken_clouds.png";
                }
                if (weatherDescription === "shower rain") {
                    return "images/shower_rain.png";
                }
                if (weatherDescription === "rain") {
                    return "images/rain.png";
                }
                if (parameters === "thunderstorm") {
                    return "images/thunderstorm.png";
                }
                if (weatherDescription === "snow") {
                    return "images/snow.png";
                }
                if (weatherDescription === "mist") {
                    return "images/mist.png";
                }
            }
    
        </script>





    Saturday, February 1, 2020 8:18 AM

Answers

  • User475983607 posted

    Create a function that both success handlers call.

    $.ajax({
    	type: "GET",
    	url: "/Index?handler=Weather",
    	contentType: "application/json",
    	dataType: "json",
    	success: function (response) {
    		populateDom(response);
    	},
    	failure: function (response) {
    		alert(response);
    	}
    });
    $('#buttonSendLocation').on('click',
    	function () {
    		var locationCity = $('#Location').val();
    		$.ajax({
    			type: "POST",
    			url: "/Index?handler=SendLocation",
    			beforeSend: function (xhr) {
    				xhr.setRequestHeader("XSRF-TOKEN",
    					$('input:hidden[name="__RequestVerificationToken"]').val());
    			},
    			data: JSON.stringify({
    				City: locationCity
    			}),
    
    			contentType: "application/json; charset=utf-8",
    			dataType: "json",
    			success: function (response) {
    				populateDom(response);
    			},
    			failure: function (response) {
    				alert(response);
    			}
    		});
    	});
    
    function populateDom(response) { 
    	document.getElementById("userLocation").innerHTML = response.cityName;
    	document.getElementById("currentTemp").innerHTML = Math.round(response.todaysTemp);
    	document.getElementById("umbrella").innerHTML = response.cloudiness + '%';
    	document.getElementById("wind").innerHTML = Math.round(response.windSpeed) + 'mps';
    	document.getElementById("sunrise").innerHTML = response.sunRise;
    	document.getElementById("sunset").innerHTML = response.sunSet;
    	document.getElementById("secondDay").innerHTML = Math.round(response.secondDayTemp);
    	document.getElementById("thirdDay").innerHTML = Math.round(response.thirddayTemp);
    	document.getElementById("fourthDay").innerHTML = Math.round(response.fourthdayTemp);
    	document.getElementById("fifthDay").innerHTML = Math.round(response.fifthdayTemp);
    	document.getElementById("secondDayImage").src = GetWeatherIcon(response.secondDayWeatherCondition);
    	document.getElementById("thirdDayImage").src = GetWeatherIcon(response.thirddayWeatherCondition);
    	document.getElementById("fourthDayImage").src = GetWeatherIcon(response.fourthdayWeatherCondition);
    	document.getElementById("fifthDayImage").src = GetWeatherIcon(response.fifthdayWeatherCondition);
    	document.getElementById("secondDayDescription").innerHTML = response.secondDayWeatherConditionDescription;
    	document.getElementById("thirdDayDescription").innerHTML = response.thirddayWeatherConditionDescription;
    	document.getElementById("fourthDayDescription").innerHTML = response.fourthdayWeatherConditionDescription;
    	document.getElementById("fifthDayDescription").innerHTML = response.fifthdayWeatherConditionDescription;
    }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, February 1, 2020 12:24 PM