JavaScript cannot store data to array from Ajax - value undefined [duplicate]

Question

I want to retrieve(continuous) data from database using AJAX and pass it to a variable in JavaScript. However, I can't store them in an array. The value in the array is always undefined. Here are the codes:

My JavaScript file:

var counter = 0;
$(document).ready(function(){
  var pressure = [];
  var waterflow = [];
  var xhr;
  function execAjax(){
    if(xhr && xhr.readyState != 4){
      xhr.abort();
    }
    xhr = $.ajax({
      url: "controller/getrate.php",
      type: "GET",
      data: {current_location},
      success: (response) => {
        var data = JSON.parse(response);
        pressure[counter] = data.pressure[counter];
        waterflow[counter] = data.waterflow[counter];
        counter++;
      }
    });
  }
  setInterval(function(){
    execAjax();
  }, 5000);

  var data = {
    datasets:[{
    data: [pressure[0],pressure[1]]
    },
    data: [waterflow[0], waterflow[1]]
   ]
  }

  var dataSetA = oldData["datasets"][0]["data"];
  var dataSetB = oldData["datasets"][1]["data"];
  console.log(dataSetA);
  console.log(dataSetB);
});

My PHP File (getrate.php):

<?php 
 include 'db.php';

 $data = array(
  "loc_id" => array(),
  "pressure" => array(),
  "waterflow" => array(),
 );

 $getData = "SELECT * FROM tbl_rates LIMIT 10";
 $execGetData = mysqli_query($db, $getData);

 while($row = mysqli_fetch_array($execGetData)){
  array_push($data['loc_id'], $row['locationID']);
  array_push($data['pressure'], $row['pressure']);
  array_push($data['waterflow'], $row['waterflow']);
 }

 echo json_encode($data, JSON_PRETTY_PRINT);
?>

OUTPUT:

[undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined]

You will find your answer here: stackoverflow.com/questions/33285868/… and if that doesn't work, you can also json_encode your subarrays: $data['loc_id'] = json_encode($data['loc_id']); $data['pressure'] = json_encode($data['pressure']); $data['waterflow'] = json_encode($data['waterflow']); — andy
– andy, Commented Feb 11, 2019 at 7:22

Haresh Vidja · Accepted Answer · 2019-02-11 07:23:32Z

0

I think you are doing mistake in success function.

success: (response) => {
    var data = JSON.parse(response);
    if(data.pressure.length>0){
         for(car i in data.pressure){
             pressure.push(data.pressure[i]);
         }
    }
    if(data.waterflow.length>0){
         for(car i in data.waterflow){
             pressure.push(data.waterflow[i]);
         }
    }
}

After this you can make custom dataset like

var data = {
    datasets:[
        {
             data: pressure
        },
        {
             data: waterflow
        }
   ]
};
var dataSetA = oldData.datasets[0].data;
var dataSetB = oldData.datasets[1].data;

console.log(dataSetA); console.log(dataSetB);

answered Feb 11, 2019 at 7:23

Haresh Vidja

8,4713 gold badges29 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jai · Accepted Answer · 2019-02-11 08:52:10Z

0

I was wondering if JSON.parse(response) was necessary as you are getting it already as the JSON object since the json_encode in your php will give you the JSON values. It may be breaking your code JSON.parse works only with string variables.
I am afraid you are referring to oldData instead of variable data.

answered Feb 11, 2019 at 8:52

Jai

913 bronze badges

Collectives™ on Stack Overflow

JavaScript cannot store data to array from Ajax - value undefined [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related