jQuery AJAX JSON请求中未捕获的类型错误

Question

My WordPress AJAX process is completing successfully, but the returned JSON object is displaying the following error in Chrome Devtools: Uncaught TypeError: Cannot read property 'vehicle' of undefined. I am not sure why this is happening. The parsed JSON data is being outputted as an object, which should be correct. All of the JavaScript and PHP code is detailed below. The sample valid JSON object can be viewed here: https://jsfiddle.net/roaq9ew1/ .

/**
 * Create 'Get Registration' button and append to vehicle-registration list item
 */
var getRegoButton = document.createElement('button');
getRegoButton.setAttribute('id', 'get-rego');
getRegoButton.setAttribute('class', 'get-rego');
getRegoButton.innerHTML = 'Get Registration';

var vehicleRegistrationWrapper = document.getElementById('field_2_6');
vehicleRegistrationWrapper.appendChild(getRegoButton);

/**
 * Function to retrieve Carjam API data via AJAX
 */ 
jQuery(document).ready( function($){
  $(".vehicle-details").hide();

  $("#get-rego").click(function(e){
    e.preventDefault();

    $(".vehicle-details").show();

    plate = $("#input_2_6").val();

    $.post(
      "/wp-admin/admin-ajax.php", 
      {
        "action": "get_vehicle",
        "plate": plate,
      }, 

      function(response) {
        obj = JSON.parse(response);
        console.log(typeof obj);
        console.log(obj.idh.vehicle);
      }
    );
  });

  function populateVehicleDetails(vehicleDetail, apiData) {
     var carData = ".vehicle-details span id="+vehicleDetail+"";
     $(carData).val(apiData);
  }
});

/**
 * Function to handle API call to Carjam for vehicle registration data
 */
add_action( 'wp_ajax_get_vehicle', 'prefix_ajax_get_vehicle' );
add_action('wp_ajax_nopriv_get_vehicle', 'prefix_ajax_get_vehicle');
function prefix_ajax_get_vehicle() {
  $plate = $_POST["input_2_6"];
  $testApikey = "C9DBAF2CD487DE38EC1AE78C09329E6711BF644C";
  $testApiUrl = "http://test.carjam.co.nz/api/car/?plate=";

  $url  = $testApiUrl.$plate."&key=".$testApiKey;

  $ch = curl_init();
  curl_setopt($ch, CURLOPT_URL, $url);
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
  $data = curl_exec($ch);
  curl_close($ch);
  $oXML = new SimpleXMLElement($data);

  echo json_encode($oXML);

  wp_die();
}

Answer 1

In your ajax call you have set your post field as plate, but you arent referencing that in your php.

Change this:

$plate = $_POST["input_2_6"];

to this:

$plate = $_POST["plate"];

You also have errors in your ajax success function:

  function(response) {
    obj = JSON.parse(response);
    console.log(typeof obj);
    console.log(obj.idh.vehicle);
  }

Declaring the variable obj this was gives it a global scope and is not good practice. It generates a strict JavaScript warning. You shouldn't use this variant, you should declare it var obj .

Having said that in this case that whole line is unneccessary. You don't need to JSON.parse the response, you simply add json as the datatype of yur ajax post and jQuery will do the rest. You can access the returned data in response.vehicle etc.

If you paste your response JSON in to JSON parser you'll get a better idea of the structure and you will see that response.vehicle is actually an object, so depending on what bits of data you want to extract it might be easier to assign that to another variable. Here's an example using a slight reworking of your code:

$.post( "/wp-admin/admin-ajax.php", { "action": "get_vehicle", "plate": plate }, function( data ) {
    var vehicle = data.idh.vehicle;
    console.log( vehicle.make ); // HOLDEN
    console.log( vehicle.model );  // VECTRA
}, "json"); // Specifying "json" here tells your ajax call what type of data to expect back from the server

As your javascript knowledge improves you may want to revisit this and improve your response handling by adding some methods to the your object to make it easier to perform set actions with the returned data, but that's a lesson for a little further down the line.