how to take value return by ajax call?

Question

i want to draw google chart from data (ajax call)

var jsonPieChartData = $.ajax({
                url: "ajax.php",
                data: {selValue1 : 1,selValue2 : 1} ,
                dataType: "json",
                async: false
                }).responseText;
        //create our data table out of json data loaded from server
        console.log(jsonPieChartData);

this is the ajax.php file that return the value

function interncompany(){

global $DB;

//query by experience total post
$sql = 'SELECT lc.id, count(ljj.job_id) as count, lc.companyname FROM {local_jobs_job} ljj INNER JOIN {local_companydetail} lc ON ljj.job_company_userid = lc.userid  where ljj.job_type = 1 group by lc.companyname';


//get the query into record
$data = $DB->get_records_sql($sql);

//put the query into array
$rows = array();

$rows = array_map(function($item) {
return (object) ['c' => [
    (object) ['v' => $item->companyname, 'f' => null],
    (object) ['v' => intval($item->count), 'f' => null]
]];
}, array_values($data));


$cols = [
(object) ['id' => '', 'label' => 'LABEL', 'pattern' => '', 'type' => 'string'],
(object) ['id' => '', 'label' => 'TOTAL', 'pattern' => '', 'type' => 'number'],
];

$returndata = new stdClass;
$returndata->cols = $cols;
$returndata->rows = $rows;

echo json_encode($returndata);

}

the data is selected dynamically using select box

if ($select1 == '1') {

     if ($select2 == '1') {

               jobcompany();

                }

     if ($select2 == '2') {

                joblocation();
                }

      if ($select2 == '3') {
                jobcategory();
        }


      if ($select2 == '4') {
                jobsalary();
        }

      if ($select2 == '5') {
                jobexperience();
        }


        if ($select2 == '6') {
                joblevel();
        }

 }

 elseif ($select1 == '2') {

    if ($select2 == '1') {

                interncompany();

                }

     if ($select2 == '2') {
                internlocation();
                }

      if ($select2 == '3') {
                interncategory();
        }


      if ($select2 == '4') {
                internsalary();
        }

      if ($select2 == '5') {
                internexperience();
        }


        if ($select2 == '6') {
                internlevel();
        }
  }

my question: how i want to create a function to take the data dynamically and insert the result in data:{} so that the data return to the php file so that can be read by the ajax call to draw the chart.

right now it returns nothing. i need to hardcoded inside data: {} in ajax to draw the chart.

the data dynamically select by this:

  // get the select value
            $(document).ready(function() {
            // for post-filter
                $('#post-filter').on('change',function(){
                var select1 = $(this).val();  // Post filter value
                var select2 = $("#field-filter").val(); // Field Filter value
                $.ajax({
                        type: 'POST',
                        url: 'ajax.php',
                        data: {selValue1 : select1,selValue2 :select2 },
                        success: function(result){
                           console.log(result); 
                        }
                    });
            });



             //  field filter value.
                 $('#field-filter').on('change',function(){

                    var select2 = $(this).val();  // Field filter value
                    var select1 = $("#post-filter").val(); // post Filter value
                    $.ajax({
                            type: 'POST',
                            url: 'ajax.php',
                            data: {selValue1 : select1,selValue2 :select2 },
                            success: function(result){
                               console.log(result);  
                            }
                        });
                     });        
            });

this is the result when clicked the select box...only the result is not return to the ajax. what to fill inside data: {} to get the result into the drawitem function ajax call?

the error when insert the header

the result data appear but got error and the chart is not there.

Answer 1

You can try the below method? I have shown the example for field-filter which you can replicate for post-filter if it works

var dataVars = {};
dataVars['selValue1'] = $("#post-filter").val();  // Post filter value
dataVars['selValue2'] = $("#field-filter").val(); // Field Filter value


var jsonPieChartData = $.ajax({
                url: "ajax.php",
                data: JSON.stringify(dataVars) ,
                dataType: "json",
                async: false
                }).responseText;
}

Also ensure content-type header is set to JSON in php

header('Content-Type: application/json');