Question posted in
You can find the official documentation here.

append the multiple data in table using ajax jQuery for-each function – Jquery ajax

I am trying to append the data in the table using ajax jquery. I know the append function with a single array. but I have two separate arrays as $data1 and $data2 as below –

I want to append it like an example table structure, but I am not able to append it. It only appends a single array as given I mention for data1 OR data2 $.each(response.data1, function (i, item). This below the has typed manually, maybe some typos please don’t consider. but I hope you understand what type of data I want to display.

Please help me, How I append both arrays. basically, I want first append product and inside components again product and inside components as much data shown in array.

Please help

<table id="mytable>
  <thead>
    <tr>
      <td>SKU</td>
      <td>Product Name</td>
      <td>Component Name</td>
      <td>Part ID</td>
    <tr>
  </thead>
  <tbody class="mytable"></tbody>
</table>

$data1[] => ['product_name' => 'computer', 'product_sku' => '123456'];
$data2[] => ['component_name' => 'MotherBoard', 'part_id' => '654321'];

header("Content-type: Application/json");
echo json_encode(array('data1' => $data1, 'data2' => $data2));

$.ajax({
   type: "POST",
   success: function (response) {
      var table = $("table#mytable > tbody.mytable");
      $.each(response.data1, function (i, item) {
         table.append(`
            <tr>
              <td>${item.product_sku}</td>
              <td>${item.product_name}</td>
              <td></td>
              <td></td>
            </tr>

            <tr>
              <td></td>
              <td></td>
              <td>${item.component_name}</td>
              <td>${item.part_id}</td>
            </tr>
         `);
      }
   }
});

SKU    | Product Name  | Component Name | Part ID
------------------------------------------------
123456 | computer      |                | 
------------------------------------------------
       |               | MotherBoard    | 654321
------------------------------------------------

123456 | other_product |                | 
------------------------------------------------
       |               | other_com      | 0000
------------------------------------------------
Tags:

2

Answers


  1. 0

    As you’re using two <tr> groups, you can use two $.each?

    like:

    $.ajax({
   type: "POST",
   success: function (response) {
      var table = $("table#mytable > tbody.mytable");
      $.each(response.data1, function (i, item) {
         table.append(`
            <tr>
              <td>${item.product_sku}</td>
              <td>${item.product_name}</td>
              <td></td>
              <td></td>
            </tr>
         `);
      }

      $.each(response.data2, function (i, item) {
         table.append(`
            <tr>
              <td></td>
              <td></td>
              <td>${item.component_name}</td>
              <td>${item.part_id}</td>
            </tr>
         `);
      }
      
   }
});
    Login or Signup to reply.
  2. 0

    You can merge the the arrays in one array and make a json encode. So you have only one JSON Object.

    <?php
$data1 = ['product_name' => 'computer', 'product_sku' => '123456'];
$data2 = ['component_name' => 'MotherBoard', 'part_id' => '654321'];

$data3 = ['product_name' => 'other_product', 'product_sku' => '123456'];
$data4 = ['component_name' => 'other_com', 'part_id' => '0000'];

$merge[] = array_merge($data1, $data2);
$merge[] = array_merge($data3, $data4);
print_r($merge);
$json = json_encode($merge);
print_r($json);

    And then you iterate through the object like you did it.
    This Code is not runnable you have to test it on your lamp server because stackoverflow not supports php scripts to be executed.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search