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
------------------------------------------------
2
Answers
As you’re using two
<tr>
groups, you can use two$.each
?like:
You can merge the the arrays in one array and make a json encode. So you have only one JSON Object.
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.