Achieve this exact PHP foreach functionality in Ajax?

Question

I am getting satisfactory output like this :

From this php foreach loop(on view and gettinf details from model and controller) and I am getting data from mysql database tables according to the condition as:

   <tfoot>
      <?php foreach ($orders as $k => $v) {     
         $order_item = $this->vendor_model->getOrdersItemData($v['o_id']); ?>
      <tr>
         <td><?php echo $v['o_id']?></td>
         <td><?php echo $v['t_id']?></td>
         <td><?php echo $v['grand_total']?></td>
         <td><?php echo $v['order_status']?></td>
         <!--Datavariable for orders-->
         <td>
            <table>
               <thead>
                  <tr>
                     <td>Product Name</td>
                     <td>Quantity</td>
                     <td>Price</td>
                  </tr>
               </thead>
               <tbody>
                  <?php foreach ($order_item as $k => $p) {
                     $product_item = $this->vendor_model->getProductData($p['product_id']); ?>
                  <tr>
                     <td><?php echo $product_item['product_name']?></td>
                     <td><?php echo $p['quantity']?></td>
                     <td><?php echo $product_item['product_price']?></td>
                     <!--data variable for order items-->       
                  </tr>
                  <?php }?>
               </tbody>
            </table>
         </td>
      </tr>
      <?php }?>
   </tfoot>
</table>

I am trying to do this in ajax like this:

$.each(data, function(k, v) {
    var product_item = < ? = json_encode($this - > vendor_model - > getOrdersItemData("19", JSON_HEX_TAG)) ? > ;<!--Is there any way to get this "19 from data by loop"-->
    html += '<tr>' +
        '<td>' + v.o_id + '</td>' +
        '<td>' + v.u_id + '</td>' +
        '<td>' + v.grand_total + '</td>' +
        '<td>' + v.order_status + '</td>' +
        //'<td>'+k + ": " + v.t_id+'</td>'+
        //'<td>'+'<pre>'+JSON.stringify(data)+'</td>'+
        '<td>' + '<pre>' + product_item.oi_id + '</td>' +
        '<td>' +
        $.each(product_item, function(k, v) {
            html += '<table>' +
                '<tr>' +
                '<td>' + k + ": " + v.oi_id + '</td>' +
                '<td>' + '<pre>' + JSON.stringify(product_item) + '</td>' +
                '</tr>' +
                '</table>';
        }) +
        '</td>' +
        '<td>' +
        '<a href="javascript:;" class="btn btn-success item-view" data="' + this.o_id + '">View</a>' +
        '<a href="javascript:;" class="btn btn-info item-edit" data="' + this.o_id + '">Edit</a>' +
        '<a href="javascript:;" class="btn btn-danger item-delete" data="' + this.o_id + '">Delete</a>' +

        '</td>' +
        '</tr>';
});

I am just starting Ajax, is there any way to do this in ajax and I know there are lots of mistakes going on as well in my ajax.

I want to do that php forloop output from ajax.

You can do it in the Ajax callback function but you would need to send back raw data ( json, xml ) and build the output for yourself. There are pros and cons to either approach. — Professor Abronsius, Nov 16 '19 at 07:56
I think you are a bit confused on what ajax means. Ajax means Asynchronous JavaScript and XML (basically you send an async request). That aside, there are 2 possible answers to your questions depending on your desires. — zozo, Nov 16 '19 at 09:17

zozo · Answer 1 · 2019-11-16T09:39:20.783

So... if your question is "how can I get the same result while making an async request?" you can do this (I'm assuming you have jquery or something, if not you can find a vanilla js implementation here Insert external page html into a page html - maybe not the best, I wrote it years ago, but should do the trick):

Lets assume you have your current version (in php) on route "/myCurrentPhpEpicOutput".

Your html + js may look like this:

<body>
    <div id="loadStuffHere"></div>

    <script>
         $(function() {
             $.ajax({
                 url: '/myCurrentPhpEpicOutput',
                 method: 'get',
                 success: function(result) {
                     $('loadStuffHere').html(result);
                 }
             });
         });
    </script>
</body>

This option basically keeps html generation on server side (the one you are satisfied by) and just load it where you need it.

If your question is "how can I compose the same format using javascript and an ajax request to get the raw data?"

The answer is similar with a few tweaks:

Lets assume again your endpoint is on route "/myCurrentPhpEpicData".

Your php will look something like:

<?php
     // ..... bla bla get orders from somewhere
     echo json_encode($orders);
     die();

     // Actually I see you have codeigniter there so maybe return JsonResponse or something instead of echo + die (I haven't work on CI since 2011ish so... can't really remember its functions names but should have one that does that).

Then your html + js will look like:

<body>
    <div id="loadStuffHere"></div>

    <script>
         $(function() {
             // This is the "load" you asked about in your question
             $.ajax({
                 url: '/myCurrentPhpEpicData',
                 method: 'get',
                 dataType: 'json',
                 success: function(data) {
                     // There are tons of variations on this... go wild
                     var computedHtml = '';
                     for (var i in data) {
                         var order = data[i];
                         // Here make your form html as a string (you did most of it in your question so you can copy paste and adapt that)
                     }
                     $('loadStuffHere').html(computedHtml);
                 }
             });
         });
    </script>
</body>

Thank you so much for your precious time and effort but the problem is that I want to do this according to the **multiple arrays** like, One array from **order_table** which has **o_id** and then an **order_items** table which has **quantity** and **product_id** and then **Products** table to get the details of the product to **order_items** then from order items to **orders**. — Krish-fz, Nov 17 '19 at 07:52

Achieve this exact PHP foreach functionality in Ajax?

1 Answers1