Hi.

I'm getting data from jQuery in format productID and display on tables. The issue is I need to convert the productID to productName.

Here is the part to get all the data in productID and display in table-form on contentNeed.

1. {source}
   <script src="<script src="http://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
   <?php
    if(!@include_once(rtrim(JPATH_ADMINISTRATOR,DS).DS.'components'.DS.'com_hikashop'.DS.'helpers'.DS.'helper.php')){
       return false;
   }
   $productClass = hikashop_get('class.product');
   ?>
   <script type="text/javascript">
   // Populate dropdown with list of charity house name
   jQuery.ajax({
       type: "GET",
       timeout: 10000,
       url: "http://ayambrand-com-my-v1.cloudaccess.host/administrator/index.php?option=com_echarity&format=raw&task=api.get_charities",
       success: function(data){
           helpers.buildDropdown(
           jQuery.parseJSON(data),
               jQuery('#charityDropdown'),
               'Select an option'
           );
       }
   });
   
   var helpers ={
       buildDropdown: function(result, dropdown, emptyMessage){
           // Remove current options
           dropdown.html('');
           // Add the empty option with the empty message
           dropdown.append('<option value="">' + emptyMessage + '</option>');
           // Check result isnt empty
           if(result != ''){
               // Loop through each of the results and append the option to the dropdown
               jQuery.each(result, function(k, v) {
                   dropdown.append('<option value="' + v.id + '">' + v.charity_name + '</option>');
               });
           }
       }
   }
   //Get dropdown value for charity house
   function showCharity(dropdown) {
       var selectedCharityHouse = dropdown.options[dropdown.selectedIndex].innerHTML;
       var selectedCharityID = dropdown.value;
       //console.log(selectedCharityHouse);
       //console.log(selectedCharityID);
       getArticleContent(selectedCharityID);
   }
   //Populate the article content for selected charity house
   function getArticleContent(selectedCharityID){
       jQuery.ajax({
           type: "GET",
           timeout: 10000,
           url: "http://ayambrand-com-my-v1.cloudaccess.host/administrator/index.php?option=com_echarity&format=raw&task=api.get_charity&charity_id=" + selectedCharityID,
           success: function(data){
               var dataResult = JSON.parse(data);
               //console.log(dataResult);
               jQuery.each(dataResult, function(k, v) {
                   generateArticleID = v.article_id;
                   generateID = v.id;
                   //console.log(generateArticleID);
                   //console.log(generateID);
                   displayCharityHouseArticle(generateArticleID);
                   getCharityNeed(generateID);
               });
           }
       });
   }
   //Display article content and article title
   function displayCharityHouseArticle(generateArticleID){
       //console.log("dalam function jquery display article");
       //console.log(generateArticleID);
       jQuery( ".pTitleDark" ).load( "/index.php?option=com_content&view=article&id="+ generateArticleID + " #title-charity h2" );
       jQuery( ".charityHouseArticle" ).load( "/index.php?option=com_content&view=article&id="+ generateArticleID + " #ch li" );
   }
   //Populate for the specific charity need
   function getCharityNeed(generateID){
       //console.log("dalam function get charity need");
       //console.log(generateID);
       //sum all the remaining quotas
       var calcRemainingQuotaAll = 0;
       //console.log("Check remaining quota before enter jquery: " + calcRemainingQuotaAll)
       jQuery.ajax({
           type: "GET",
           url: "http://ayambrand-com-my-v1.cloudaccess.host/administrator/index.php?option=com_echarity&format=raw&task=api.get_need&charity_id=" + generateID,
           success: function (data){
               //console.log('get need for selected charity house : ');
               //console.log(ID);
               var ac = JSON.parse(data);
               var content = '<table class="table table-hover">';
               var heading = "<tr>";
               var datas = "";
               var remaining_quota='';
               var product_id='';
               var quota = '';
              
               heading += '<th>' + 'Product' + '</th>' + '<th>' + 'Quantity Need' + '</th>' + '<th>' + 'Price Each' + '</th>' + '<th>' + 'My Donation' + '</th>' + '<th>' + 'Amount' + '</th>';
               jQuery.each(ac, function(index, value) {
                   jQuery.each(value.unmet_quotas, function(subindex, subvalue) {
                       jQuery.each(subvalue, function(subsubindex, subsubvalue){
                           remaining_quota = subvalue.remaining_quota;
                           //calcRemainingQuota = Number(calcRemainingQuota) + Number(remaining_quota);
                           product_id = subvalue.product_id;
                           quota = subvalue.quota;
                           console.log('Product ID : ' + product_id +' Quota : ' + quota + ' Remaining Quota : ' + remaining_quota);
                       });
                       calcRemainingQuotaAll = Number(calcRemainingQuotaAll) + Number(remaining_quota);
                       var productLink = product_id;
                       if(remaining_quota != 0){
                           datas += "<tr>";
                           datas += '<td class="productVariable">' + productLink + '</td>' + '<td>' + remaining_quota + '</td>' ;
                           datas += "</tr>";
                       }
                       else{
                           //hide row from the table view
                           //alert("some row are skip since the remaining quota is 0");
                       }
                   });
                   console.log("Total Remaining Quota: " + calcRemainingQuotaAll);
                   heading += "</tr>";
                   content += heading + datas + "</table>";
                   //check if all quota are fullfil for selected charity house
                   if(calcRemainingQuotaAll == 0){
                       alert("Please choose another charity house since your current selection is already fulfill.");
                   }
                   else{
                       jQuery(".pTitle").load( "/index.php?option=com_content&view=article&id="+ generateArticleID + " #title-charity h2" );
                       //Check content if empty or not. Empty the content first if there is a content
                       if (jQuery('#contentNeed').html()) {
                          //alert('The container contains something.');
                          jQuery( "#contentNeed" ).empty();
                       }else {
                          //alert('The container is empty.');
                       }
                       jQuery('#contentNeed').append(content);
                   }
               });
           }
       });
   }
   </script>
   
   <div class="wrap">
        <table class="headerTitle">
           <tr>
               <td>
                   <p class="pTitle">STEP 1 : SELECT A CHARITY TO SEE ITEMS THEY NEED</p>
               </td>
           </tr>
       </table>
      
       <div id="typeLeft">
           <table class="tableLeft">
               <tr class="chooseDescription">
                   <td class="">
                       <select id="charityDropdown" name="charityName" onchange="showCharity(this)">
                   </td>
               </tr>
           </table>
       </div>
       <div id="typeRight">
           <table class="tableRight">
               <tr class="chooseTitle">
                   <td>
                       <p class="pTitleDark">
                      
                       </p>
                   </td>
               </tr>
               <tr class="chooseDescription">
                   <td>
                       <div class="charityHouseArticle">
                      
                       </div>
                   </td>
               </tr>
           </table>
       </div>
       <table>
           <tr>
               <td>
                   <p class="pTitle">
                  
                   </p>
               </td>
           </tr>
       </table>
       <div id="contentNeed">
      
       </div>
   </div>