Combine array of objects into another array per table row-CodePudding

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 >

        <thead>
            <tr>
                <th >Product</th>
                <th >Total</th>
            </tr>
        </thead>

        <tbody>
            <tr >

    <td >
        <a>Fried Chicken</a><span id="delivety_api_id_field">2753</span> <strong >×&nbsp;1</strong><ul ><li><strong >Side Dishes Options:</strong> <p>Rice<span >2971</span> ( <span >1,00&nbsp;<span >€</span></span>)</p></li><li><strong >Side Dishes Options:</strong> <p>French Fries<span >2972</span> ( <span >1,50&nbsp;<span >€</span></span>)</p></li></ul> </td>

    <td >
        <span ><bdi>10,50&nbsp;<span >€</span></bdi></span>  </td>

</tr>

<tr >

    <td >
        <a>Fried Chicken</a><span id="delivety_api_id_field">2753</span> <strong >×&nbsp;1</strong><ul ><li><strong >Side Dishes Options:</strong> <p>French Fries<span >2972</span> ( <span >1,50&nbsp;<span >€</span></span>)</p></li></ul>    </td>

    <td >
        <span ><bdi>9,50&nbsp;<span >€</span></bdi></span>   </td>

</tr>

<tr >

    <td >
        <a>Steak</a><span id="delivety_api_id_field">2748</span> <strong >×&nbsp;1</strong><ul ><li><strong >Side Dishes Options:</strong> <p>Rice<span >2971</span> ( <span >1,00&nbsp;<span >€</span></span>)</p></li><li><strong >Side Dishes Options:</strong> <p>French Fries<span >2972</span> ( <span >1,50&nbsp;<span >€</span></span>)</p></li><li><strong >Preparation:</strong> <p>Rare<span >2990</span></p></li></ul>    </td>

    <td >
        <span ><bdi>14,50&nbsp;<span >€</span></bdi></span>  </td>

</tr>

        </tbody>

        <tfoot>
                                <tr>
                        <th scope="row">Subtotal:</th>
                        <td><span >34,50&nbsp;<span >€</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 >34,50&nbsp;<span >€</span></span></td>
                    </tr>
                                        </tfoot>
    </table>

CodePudding user response：

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.