Changing value of a td from another api with same name - php

Question

So i am using 2 apis of php that echo's value in json encode
one api contains all the data and the other api has the same data but only where one of the value is true
e.g
data from api contains 50 rows
data from api 2 contains 20 rows because that api shows same data but where a value is Yes
i cannot use join in tables as they are from different sources
so i was trying to join them using jQuery
with my code only the first value changes but not the rest
ive tried the following code but it will only change the first value
$.get("customapi.php", {
data: 'get_data'
}, function(response) {
$("#autovisit tbody").html("");
for (var i = 0; i < response.length; i++) {
html = "<tr>";
html += `
<td><b>${i+1}</b></td>
<td>${response[i]['name']}</td>
<td>${response[i]['p_name']}</td>
<td>${response[i]['p_type']}</td>
<td>${response[i]['a_date']}</td>
<td>${response[i]['l_date']}</td>
<td>${response[i]['r_date']}</td>
<td>${response[i]['d_name']}</td>
<td id="get_visit" class="text-center">NO</td>
<td id="get_invoice" class="text-center">NO</td>`;
$("#autovisit tbody").append(html);
$.get("customapi2.php", {
data: 'get_data'
}, function(result) {
for (var i = 0; i < result.length; i++)
$("#get_visit").text(result[i]['VISITED']);
$("#get_invoice").text(result[i]['INVOICED']);
}, 'JSON');
}
}, 'JSON');
in the above api both have the same data in the following values
{response[i]['name']}
{response[i]['p_name']}
{response[i]['p_type']}
{response[i]['a_date']}
{response[i]['l_date']}
{response[i]['r_date']}
{response[i]['d_name']}
the rest two
that is visit and invoice is comming from the other api and i need to change that text but with this code when the first name is true it only changes that not the others

Answer 1

You can use the following code to update your column values.
What you will be doing here is assigning a specific id to a data cell and then using that id to update data cell based on values from second api call.
This is done assuming that name is unique in response
$.get(
"customapi.php",
{
data: "get_data"
},
function(response) {
$("#autovisit tbody").html("");
for (var i = 0; i < response.length; i++) {
html = "<tr>";
html += `
<td><b>${i + 1}</b></td>
<td>${response[i]["name"]}</td>
<td>${response[i]["p_name"]}</td>
<td>${response[i]["p_type"]}</td>
<td>${response[i]["a_date"]}</td>
<td>${response[i]["l_date"]}</td>
<td>${response[i]["r_date"]}</td>
<td>${response[i]["d_name"]}</td>
<td id="visit-`${response[i]['name']}`" class="text-center">NO</td>
<td id="invoice-`${response[i]['name']}`" class="text-center">NO</td>`;
$("#autovisit tbody").append(html);
}
$.get(
"customapi2.php",
{
data: "get_data"
},
function(result) {
for (var i = 0; i < result.length; i++)
$("#visit-`${result[i]['name']}`").text(result[i]["VISITED"]);
$("#invoice-`${result[i]['name']}`").text(result[i]["INVOICED"]);
},
"JSON"
);
},
"JSON"
);
Please not that your 2nd API call should be outside the for loop, otherwise it will have too many unnecessary requests

Answer 2

You need UNIQUE IDs!
There cannot be more than one get_visit and one get_invoice so change the ID of the cells to some unique you also can know in the second code
An actual ID is best, so change the uniqueID combo below to an database ID if you have it
var uniqueID;
for (var i = 0; i < response.length; i++) {
uniqueID = response[i]['name'] + "_" + response[i]['p_name']; // or whatever is unique
html = "<tr>";
html += `
<td><b>${i+1}</b></td>
<td>${response[i]['name']}</td>
<td>${response[i]['p_name']}</td>
<td>${response[i]['p_type']}</td>
<td>${response[i]['a_date']}</td>
<td>${response[i]['l_date']}</td>
<td>${response[i]['r_date']}</td>
<td>${response[i]['d_name']}</td>
<td id="${uniqueID}_visit" class="text-center">NO</td>
<td id="${uniqueID}_invoice" class="text-center">NO</td>`;
}
html += "</tr>";
...
for (var i = 0; i < result.length; i++)
uniqueID = result[i]['name'] + "_" + result[i]['p_name']; // or whatever is unique from above
$(`#${uniqueID}_visit`).text(result[i]['VISITED']);
$(`#${uniqueID}_invoice`).text(result[i]['INVOICED']);
}