Changing value of a td from another api with same name

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

You need to give the first rows a data-id of something unique (name+date or something), then update the first with the second result in situ — mplungjan, Sep 02 '19 at 08:35
I did. and then you accepted someone else's identical answer. Great. — mplungjan, Sep 02 '19 at 09:22
with your answer i was getting errors and with that it got fixed thats why i accepted that persons answer. and its wrong of you to marked it as duplicate after i changed to his answer. also the answers you said is duplicate to mine i did check them and they did not help me — Ahsan Baloch, Sep 03 '19 at 09:39
The base error and the base answer was in the comment I gave to the question. You needed to not use the same ID. I did not get a chance to fix any errors that may or may not have been due to your implementation of my code. If I see the error you posted, you missed a backtick here: `#\`${result[i]['unique-id-here']}_visit` and then likely fixed the missing backtick when you tried his identical code — mplungjan, Sep 03 '19 at 09:44
Actually this is easier to read: `$(\`#${uniqueID}_visit\`).text(result[i]['VISITED']); $(\`#${uniqueID}_invoice\`).text(result[i]['INVOICED']);` — mplungjan, Sep 03 '19 at 09:51

mplungjan · Answer 1 · 2019-09-03T09:50:45.737

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']);
}

with this code i was getting this error Uncaught Error: Syntax error, unrecognized expression: #`${result[i]['unique-id-here']}_visit at Function.se.error (VM230 jquery.min.js:2) at se.tokenize (VM230 jquery.min.js:2) at se.select (VM230 jquery.min.js:2) at Function.se [as find] (VM230 jquery.min.js:2) at k.fn.init.find (VM230 jquery.min.js:2) at new k.fn.init (VM230 jquery.min.js:2) — Ahsan Baloch, Sep 02 '19 at 09:03
at k (VM230 jquery.min.js:2) at Object.success (VM234 autovisit.js:27) at c (VM230 jquery.min.js:2) at Object.fireWith [as resolveWith] (VM230 jquery.min.js:2) — Ahsan Baloch, Sep 02 '19 at 09:04
Ok, I updated my answer with a more readable and safer version — mplungjan, Sep 02 '19 at 09:12

Haris Mehmood · Accepted Answer · 2019-09-02T09:41:12.493

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

Thankyou this worked also i like the way you structure your code — Ahsan Baloch, Sep 02 '19 at 09:00

Changing value of a td from another api with same name

2 Answers2