How to merge two API endpoint data and put into table?

I asked similar this type of question earlier. There are two arrays coming from each API This is array data coming from one API endpoint.

  http://127.0.0.1:8000/api/productsales

   salesTable: Array(3) 
     0 : {id: 1, name: "Apple" , yearly:"40", daily:"5" }
     1 : {id: 2, name: "Banana", yearly:"60", daily:"8" }
     2 : {id: 3, name: "Mango",  yearly:"90", daily:"10"}

This is array data coming from another API endpoint.

 http://127.0.0.1:8000/api/productsales1
  salesTable: Array(3) 
     0 : {id: 1, name: "Apple" , yearly:"30", daily:"3" }
     1 : {id: 2, name: "Banana", yearly:"40", daily:"7" }
     2 : {id: 3, name: "Mango",  yearly:"88", daily:"9"}

I am expecting these results. I want to merge two API endpoint data and create in the table

|  Period    |  Apple | Banana   | Mango |
*------------*--------*----------*---------*
|  Yearly    |   70   |     100  | 178   |
|   Daily    |   8    |      15  |  19   |

In Html

 <table id="sales_table">
                    <thead>
                        <tr id="sales_item_title">
                         </tr>
                    </thead>
                    <tbody>
                        <tr id="sales_item"></tr>
                     </tbody>
               </table>

and In Script file

<script>
    Promise.all([
        fetch(' http://127.0.0.1:8000/api/productsales').then((response) => response.json()),
        fetch('http://127.0.0.1:8000/api/productsales1').then((response) => response.json()),
    ]).then(function () {
            
        ['Daily','Yearly'].forEach(sale_period => {
            const sale_id =sale_period.toLowerCase();
            const $sale_row = $('<tr>', {id: sale_id}).append($('<th>', {text:sale_period}));
            $('#sales_table').append($sale_row)
        });
        $('#sales_item_title').append("<th>Period</th>");

        data.salesTable.forEach(sale => {
            $('#sale_item_title').append('<th>' + sale.name + '</th>');
            ['daily','yearly' ].forEach(sale_period => {
                const $sale_row = $('#' +sale_period);
                $sale_row.append('<td>' + sale[sale_period] + '</td>')
            });
        });
    })
</script>

I don't know how to combine them into one summing yearly and daily? But I need two merges two API endpoint data and sum them and form a new array-like

salesTable: Array(3) 
     0 : {id: 1, name: "Apple" , yearly:"70", daily:"8" }
     1 : {id: 2, name: "Banana", yearly:"100", daily:"15" }
     2 : {id: 3, name: "Mango",  yearly:"178", daily:"19 "}