```javascript
getCartAjax()
// Fungsi untuk melakukan perulangan pada cart dengan data yang sudah di get diatas
const getCart = (res) => {
$("#cartItemsContainer").empty();
$.each(res, function (index, item) {
const html = `
${index + 1}.
${item.name}
Price/dish: ${item.price} P
${item.amount}
`
$("#cartItemsContainer").append(html);
})
}
```
the `getCart()` function is too long and complex, which can be quite difficult to comprehend.
maybe we could break it to smaller function so it is easier to read and comprehend.
index.js
```javascript
const getDish = (data) => {
$("#dishId").empty()
$.each(data, function (index, item) {
const html = `
${item.name}
Dish Category - ${item.category}
${item.description}
Price - ${item.price}
`
$("#dishId").append(html);
});
}
```
The `getDish()` function above can be considered quite long and hard to read.
it can be refactored to be a bit more readable and maintainable
purchase.js
the `getPurchaseAjax()` function
```javascript
const getPurchaseAjax = () => {
const data = {
deliveryTime: $("#date").val(),
address: $("#address").val(),
email: $("#email").val(),
phoneNumber: $("#phoneNumber").val()
}
const headers = {
'Content-Type': 'application/json',
'Authorization': `Bearer ${localStorage.getItem('token')}`
};
ajaxRequest(
'api/order',
'POST',
JSON.stringify(data),
function (response) {
purchaseSuccess()
},
function (jqXHR, textStatus, errorThrown) {
if (jqXHR.status == 200) {
purchaseSuccess()
}
},
headers
);
}
```
This function is responsible for making a purchase request to the server. It retrieves form data, constructs an AJAX request, and handles the success response by redirecting the user. it does multiple tasks and many responsibilities.
the `getCart()` function
```javascript
const getCart = () => {
const data = "";
const headers = {
'Content-Type': 'application/json',
'Authorization': `Bearer ${localStorage.getItem('token')}`
};
ajaxRequest(
'api/basket',
'GET',
JSON.stringify(data),
function (response) {
$.each(response, function (index, item) {
const html = `
${item.name}
Price/dish: ${item.price} P
Quantity: 2
Total order cost: ${item.totalPrice} P
`;
$('#cartItemsContainer').append(html);
});
const total = response.reduce(function (accumulator, item) {
return accumulator + item.totalPrice;
}, 0);
$("#totalPriceAll").html(`Total: ${total} P`);
},
function (jqXHR, textStatus, errorThrown) {
},
headers
);
};
getCart();
```
it combines a lot of tasks into a single method such as an AJAX request, iterating over the response data, generating HTML, and updating the total price. it makes it hard to read and comprehend the tasks on the function
registration.js
```javascript
$('#form').submit(function (event) {
event.preventDefault();
const data = {
fullName: $('#fullName').val(),
password: $('#password').val(),
email: $('#email').val(),
address: $('#address').val(),
birthDate: $('#date').val(),
gender: $('#gender').val(),
phoneNumber: $('#phoneNumber').val()
}
const headers = {
'Content-Type': 'application/json'
};
// Fungsi untuk membuat data baru pada API register dan menggunakan endpoint POST
ajaxRequest(
'api/account/register',
'POST',
JSON.stringify(data),
function (response) {
alert('Register berhasil!');
},
function (jqXHR, textStatus, errorThrown) {
alert('Register gagal!');
},
headers
);
});
```
The code snippet above shows that the method has multiple tasks to perform such as event handling, data extraction, header cofiguration, and AJAX requests. It is too long
LidiaIvanova
commented
1 year ago
cart.js
```javascript getCartAjax() // Fungsi untuk melakukan perulangan pada cart dengan data yang sudah di get diatas const getCart = (res) => { $("#cartItemsContainer").empty(); $.each(res, function (index, item) { const html = `
${index + 1}.
${item.name}
Price/dish: ${item.price} P
index.js
```javascript const getDish = (data) => { $("#dishId").empty() $.each(data, function (index, item) { const html = `
${item.name}
Dish Category - ${item.category}
${item.description}
Price - ${item.price}
purchase.js
the `getPurchaseAjax()` function ```javascript const getPurchaseAjax = () => { const data = { deliveryTime: $("#date").val(), address: $("#address").val(), email: $("#email").val(), phoneNumber: $("#phoneNumber").val() } const headers = { 'Content-Type': 'application/json', 'Authorization': `Bearer ${localStorage.getItem('token')}` }; ajaxRequest( 'api/order', 'POST', JSON.stringify(data), function (response) { purchaseSuccess() }, function (jqXHR, textStatus, errorThrown) { if (jqXHR.status == 200) { purchaseSuccess() } }, headers ); } ``` This function is responsible for making a purchase request to the server. It retrieves form data, constructs an AJAX request, and handles the success response by redirecting the user. it does multiple tasks and many responsibilities. the `getCart()` function ```javascript const getCart = () => { const data = ""; const headers = { 'Content-Type': 'application/json', 'Authorization': `Bearer ${localStorage.getItem('token')}` }; ajaxRequest( 'api/basket', 'GET', JSON.stringify(data), function (response) { $.each(response, function (index, item) { const html = `
${item.name}
Price/dish: ${item.price} P
Quantity: 2
Total order cost: ${item.totalPrice} P
registration.js
```javascript $('#form').submit(function (event) { event.preventDefault(); const data = { fullName: $('#fullName').val(), password: $('#password').val(), email: $('#email').val(), address: $('#address').val(), birthDate: $('#date').val(), gender: $('#gender').val(), phoneNumber: $('#phoneNumber').val() } const headers = { 'Content-Type': 'application/json' }; // Fungsi untuk membuat data baru pada API register dan menggunakan endpoint POST ajaxRequest( 'api/account/register', 'POST', JSON.stringify(data), function (response) { alert('Register berhasil!'); }, function (jqXHR, textStatus, errorThrown) { alert('Register gagal!'); }, headers ); }); ``` The code snippet above shows that the method has multiple tasks to perform such as event handling, data extraction, header cofiguration, and AJAX requests. It is too long