Ajax request made but position of value in returned response as array keeps changing. how do I fix this

Question

I have a script which sends an array of numbers via Ajax to a web server.

The values are used to query a database and then the corresponding values of those numbers In the table are sent back which I then send to respective divs in my html file

see below.

function getData() {

  var faq_get = Array("1", "2", "3");


  var faq_async_request = [];
  var responses = [];
  for (i in faq_get) {
    // you can push  any aysnc method handler
    faq_async_request.push($.ajax({
      url: "https://###########.com/data/data.php", // your url
      method: "post", // method GET or POST
      data: {
        mid: faq_get[i]
      },
      success: function (data) {
        console.log("success of ajax response");
        responses.push(data);
        
      }
    }));
  }

  $.when.apply(null, faq_async_request).done(function () {
    // all done
    console.log("all request completed");
    console.log(responses);

    $("#3").html(responses[2]);
    $("#2").html(responses[1]);
    $("#1").html(responses[0]);
  });
}

PHP SCRIPT BELOW

 $fig = $_POST['mid']; 

$sql = "SELECT * from data where id = '$fig'";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
  // output data of each row
  while($row = $result->fetch_assoc()) {
    echo $row["scores"];
  }
 }

my Ajax script sends these data and receives the responses as I wanted, but the I have one small issue. The position of the values gets swapped from time to time.

pls see image below

oh - having looked closer I see several requests.. ignore the `order-by` suggestion then — Professor Abronsius, Feb 22 '22 at 09:41
**Warning:** You are wide open to [SQL Injections](https://php.net/manual/en/security.database.sql-injection.php) and should use parameterized **prepared statements** instead of manually building your queries. They are provided by [PDO](https://php.net/manual/pdo.prepared-statements.php) or by [MySQLi](https://php.net/manual/mysqli.quickstart.prepared-statements.php). Never trust any kind of input! Even when your queries are executed only by trusted users, [you are still in risk of corrupting your data](http://bobby-tables.com/). [Escaping is not enough!](https://stackoverflow.com/q/5741187) — Dharman, Feb 22 '22 at 10:13

Barmar · Accepted Answer · 2022-02-22T10:34:58.447

1

You need to process the responses in the $.when callback, so that you process them in the order that they were sent, not when the responses were received.

function getData() {

  var faq_get = Array("1", "2", "3");

  var faq_async_request = faq_get.map(id => $.ajax({
    url: "https://###########.com/data/data.php", // your url
    method: "post", // method GET or POST
    data: {
      mid: id
    }
  }));

  $.when(...faq_async_request).done(function(...responses) {
    // all done
    console.log("all request completed");
    responses = responses.map(resp => resp[0]); // get the first value from each promise
    console.log(responses);

    $("#3").html(responses[2]);
    $("#2").html(responses[1]);
    $("#1").html(responses[0]);
  });
}

edited Feb 22 '22 at 10:34

answered Feb 22 '22 at 09:40

Barmar

741,623
53
500
612

this returns an empty set of data – 4 Figure Creatives Feb 22 '22 at 09:51
I think it should work. Are you sure you have the `...` before the variables? – Barmar Feb 22 '22 at 10:03
no I removed them, what do they mean please? thanks @barmar – 4 Figure Creatives Feb 22 '22 at 10:10
That's argument spreading. https://stackoverflow.com/questions/34559918/spread-syntax-es6 – Barmar Feb 22 '22 at 10:11
The first one spreads the array into arguments, just like `$.when.apply()` does. The second one makes the `responses` parameter contain an array of all the arguments. – Barmar Feb 22 '22 at 10:12
fantastic it works correctly, but it then adds a "success" message along with result how do I get rid of that please – 4 Figure Creatives Feb 22 '22 at 10:13
There's no success message in my code, I don't know where that could be coming from. You had `console.log("success of ajax response");` in your original code, but I removed that. – Barmar Feb 22 '22 at 10:16
0: (3) ['4 votes\n', 'success', {…}] 1: (3) ['7 votes\n', 'success', {…}] 2: (3) ['0 votes\n', 'success', {…}] length: 3 [[Prototype]]: Array(0) – 4 Figure Creatives Feb 22 '22 at 10:19
Oh right. `$.ajax` calls the success function with 3 arguments. – Barmar Feb 22 '22 at 10:20
I updated the answer with code to get the first value of each. – Barmar Feb 22 '22 at 10:22
still getting the same response with the "success" – 4 Figure Creatives Feb 22 '22 at 10:31
There was an obvious typo: `response` should be `responses`. – Barmar Feb 22 '22 at 10:35
oh I see I thought you intentionally wanted to pass the filtered values to the variable "response". so I also tried to use response when accessing it thanks – 4 Figure Creatives Feb 22 '22 at 10:38
That would have worked if all the later variables were changed. – Barmar Feb 22 '22 at 10:41

Ajax request made but position of value in returned response as array keeps changing. how do I fix this

1 Answers1