I have a checkout table from where I obtain the values to later send as an API POST request. I've built two separate arrays and now I need to combine them, and I'm having trouble to achieve this.
This is my code:
let orderItems = "";
let orderArray = [];
let prodsArray = [];
let datesObj = {};
let modifiersArray = [];
let comboMealsArray = [];
let modifiersObj = {};
let modifierID;
let modifierPrice;
for(var i = 0; i < jQuery(".woocommerce-table__line-item.order_item .wc-item-meta li").length; i++){//get modifier id and price from table
modifierID = jQuery(".hidden-modifier-id").eq(i).text();//modifier id is hidden from frontend but obtainable
modifierPrice = jQuery(".wc-item-meta .amount").eq(i).text();//each modifier price
let removePriceSymbols = modifierPrice.replace("€","");
let formatPrice = removePriceSymbols.replace(",", ".");
if(formatPrice === ""){
formatPrice = 0;
}
let actualModifierPrice = parseFloat(formatPrice);
modifiersObj = {[modifierID]: actualModifierPrice}; //outputs: {2971: 1}
modifiersArray.push(modifiersObj);
}
console.log(modifiersArray); // outputs: [{2971: 1}, {2972: 1.5}, {2972: 1.5}, {2971: 1}, {2972: 1.5}, 2990: 0}]
for(var i = 0; i < jQuery(".woocommerce-table__line-item.order_item").length; i++){//get order values from checkout table per row
let prodsObj = {};
let prodName = jQuery(".woocommerce-table__line-item.order_item > .product-name > a").eq(i).text();//get prodName from table cell
let prodQuant = jQuery(".woocommerce-table__line-item.order_item > .product-name > .product-quantity").eq(i).text();//get prodQuant from table cell
let prodDelivetyId = jQuery(".woocommerce-table__line-item.order_item > .product-name > #delivety_api_id_field").eq(i).text();//get delivety prod api id from table cell
let prodTotal = jQuery(".woocommerce-table__line-item.order_item > .product-total > .amount").eq(i).text();//get prodTotal from table cell
let removeQuantSymbols = prodQuant.replace(/[^0-9\.]+/g,"");
let removePriceSymbols = prodTotal.replace("€","");
let formatPrice = removePriceSymbols.replace(",", ".");
orderItems += prodName + " " + prodQuant + " " + prodTotal + "\r\n";
let actualID = parseInt(orderNumber);
let actualQuant = parseInt(removeQuantSymbols);
let actualApiID = parseInt(prodDelivetyId);
let actualPrice = parseFloat(formatPrice);
let prodTotalUni = actualPrice / actualQuant;
//prodsObj.name = prodName;
//prodsObj.id = actualID;
prodsObj.api_id = actualApiID;
prodsObj.count = actualQuant;
prodsObj.price = prodTotalUni;
prodsObj.modifiers = modifiersArray;
prodsArray.push(prodsObj);
}
orderArray.push(prodsArray);
console.log(orderArray);This is my table chekcout and this is what my API response looks like:
{"2022-12-21":[{"api_id":2753,"count":1,"price":10.5,"modifiers":[{"2971":1},{"2972":1.5},{"2972":1.5},{"2971":1},{"2972":1.5},{"2990":0}]},{"api_id":2753,"count":1,"price":9.5,"modifiers":[{"2971":1},{"2972":1.5},{"2972":1.5},{"2971":1},{"2972":1.5},{"2990":0}]},{"api_id":2748,"count":1,"price":14.5,"modifiers":[{"2971":1},{"2972":1.5},{"2972":1.5},{"2971":1},{"2972":1.5},{"2990":0}]}]}
And I want it to look like this:
{"2022-12-21":[{"api_id":2753,"count":1,"price":10.5,"modifiers":[{"2971":1},{"2972":1.5}]},{"api_id":2753,"count":1,"price":9.5,"modifiers":[{"2972":1.5}]},{"api_id":2748,"count":1,"price":14.5,"modifiers":[{"2971":1},{"2972":1.5},{"2990":0}]}]}
I'm not quite sure how I would achieve this and I'm even having trouble explaning my problem correctly but hopefully you can understand by looking at my code/examples.
This is my table input structure:
<table class="woocommerce-table woocommerce-table--order-details shop_table order_details">
<thead>
<tr>
<th class="woocommerce-table__product-name product-name">Product</th>
<th class="woocommerce-table__product-table product-total">Total</th>
</tr>
</thead>
<tbody>
<tr class="woocommerce-table__line-item order_item">
<td class="woocommerce-table__product-name product-name">
<a>Fried Chicken</a><span id="delivety_api_id_field">2753</span> <strong class="product-quantity">× 1</strong><ul class="wc-item-meta"><li><strong class="wc-item-meta-label">Side Dishes Options:</strong> <p>Rice<span class="hidden-modifier-id">2971</span> (+<span class="woocommerce-Price-amount amount">1,00 <span class="woocommerce-Price-currencySymbol">€</span></span>)</p></li><li><strong class="wc-item-meta-label">Side Dishes Options:</strong> <p>French Fries<span class="hidden-modifier-id">2972</span> (+<span class="woocommerce-Price-amount amount">1,50 <span class="woocommerce-Price-currencySymbol">€</span></span>)</p></li></ul> </td>
<td class="woocommerce-table__product-total product-total">
<span class="woocommerce-Price-amount amount"><bdi>10,50 <span class="woocommerce-Price-currencySymbol">€</span></bdi></span> </td>
</tr>
<tr class="woocommerce-table__line-item order_item">
<td class="woocommerce-table__product-name product-name">
<a>Fried Chicken</a><span id="delivety_api_id_field">2753</span> <strong class="product-quantity">× 1</strong><ul class="wc-item-meta"><li><strong class="wc-item-meta-label">Side Dishes Options:</strong> <p>French Fries<span class="hidden-modifier-id">2972</span> (+<span class="woocommerce-Price-amount amount">1,50 <span class="woocommerce-Price-currencySymbol">€</span></span>)</p></li></ul> </td>
<td class="woocommerce-table__product-total product-total">
<span class="woocommerce-Price-amount amount"><bdi>9,50 <span class="woocommerce-Price-currencySymbol">€</span></bdi></span> </td>
</tr>
<tr class="woocommerce-table__line-item order_item">
<td class="woocommerce-table__product-name product-name">
<a>Steak</a><span id="delivety_api_id_field">2748</span> <strong class="product-quantity">× 1</strong><ul class="wc-item-meta"><li><strong class="wc-item-meta-label">Side Dishes Options:</strong> <p>Rice<span class="hidden-modifier-id">2971</span> (+<span class="woocommerce-Price-amount amount">1,00 <span class="woocommerce-Price-currencySymbol">€</span></span>)</p></li><li><strong class="wc-item-meta-label">Side Dishes Options:</strong> <p>French Fries<span class="hidden-modifier-id">2972</span> (+<span class="woocommerce-Price-amount amount">1,50 <span class="woocommerce-Price-currencySymbol">€</span></span>)</p></li><li><strong class="wc-item-meta-label">Preparation:</strong> <p>Rare<span class="hidden-modifier-id">2990</span></p></li></ul> </td>
<td class="woocommerce-table__product-total product-total">
<span class="woocommerce-Price-amount amount"><bdi>14,50 <span class="woocommerce-Price-currencySymbol">€</span></bdi></span> </td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Subtotal:</th>
<td><span class="woocommerce-Price-amount amount">34,50 <span class="woocommerce-Price-currencySymbol">€</span></span></td>
</tr>
<tr>
<th scope="row">Shipping:</th>
<td>Local pickup</td>
</tr>
<tr>
<th scope="row">Payment method:</th>
<td>Multibanco</td>
</tr>
<tr>
<th scope="row">Total:</th>
<td><span class="woocommerce-Price-amount amount">34,50 <span class="woocommerce-Price-currencySymbol">€</span></span></td>
</tr>
</tfoot>
</table>Edit after all comments
let orderItems = "";
let orderArray = [];
let prodsArray = [];
let datesObj = {};
let comboMealsArray = [];
let modifiersObj = {};
let modifierID;
let modifierPrice;
for(var i = 0; i < jQuery(".woocommerce-table__line-item.order_item").length; i++){//get order values from checkout table per row
let prodsObj = {};
let prodName = jQuery(".woocommerce-table__line-item.order_item > .product-name > a").eq(i).text();//get prodName from table cell
let prodQuant = jQuery(".woocommerce-table__line-item.order_item > .product-name > .product-quantity").eq(i).text();//get prodQuant from table cell
let prodDelivetyId = jQuery(".woocommerce-table__line-item.order_item > .product-name > #delivety_api_id_field").eq(i).text();//get delivety prod api id from table cell
let prodTotal = jQuery(".woocommerce-table__line-item.order_item > .product-total > .amount").eq(i).text();//get prodTotal from table cell
let removeQuantSymbols = prodQuant.replace(/[^0-9\.]+/g,"");
let removePriceSymbols = prodTotal.replace("€","");
let formatPrice = removePriceSymbols.replace(",", ".");
orderItems += prodName + " " + prodQuant + " " + prodTotal + "\r\n";
let modifiersArray = [];
let prodMods = jQuery(".woocommerce-table__line-item.order_item").eq(i).find("li");
for(let prodMod of prodMods) {
modifierID = jQuery(".hidden-modifier-id", prodMod).text();//modifier id is hidden from frontend but obtainable
modifierPrice = jQuery(".amount", prodMod).text();//each modifier price
let removePriceSymbols = modifierPrice.replace("€","");
let formatPrice = removePriceSymbols.replace(",", ".");
if(formatPrice === ""){
formatPrice = 0;
}
let actualModifierPrice = parseFloat(formatPrice);
modifiersObj = {[modifierID]: actualModifierPrice}; //outputs: {2971: 1}
modifiersArray.push(modifiersObj);
}
let actualID = parseInt(orderNumber);
let actualQuant = parseInt(removeQuantSymbols);
let actualApiID = parseInt(prodDelivetyId);
let actualPrice = parseFloat(formatPrice);
let prodTotalUni = actualPrice / actualQuant;
prodsObj.name = prodName;
prodsObj.id = actualID;
prodsObj.api_id = actualApiID;
prodsObj.count = actualQuant;
prodsObj.price = prodTotalUni;
prodsObj.modifiers = modifiersArray;
prodsArray.push(prodsObj);
}
orderArray.push(prodsArray);
console.log(orderArray);
I feel like you should learn a bit more about jQuery, there are things that you can do with it that really fits this situation (like searching for data in a given context). I'll maybe try to refine this even more at some point, but at least this works the way you intended it.
What I've done is create a second loop INSIDE the main loop, that iterates over each li element that represents a modifier, then jQueried the data you needed in that li element context.