PHP AJAX response.status return undefined

Question

I have two problems really here, the first one being that when I try to evaluate response.status I get undefined and the second one being that my "$_SESSION['promo-code'] = $arr" is also not being created. When entering a promo code, I get the following :

AJAX

    function applyPromo(){
        var promo = $("#promo-code-value").val().trim();
        console.log(promo);
        $.ajax({
            url:"get-promo.php",
            type: "POST",
            data:{ getpromo : promo},
            success: function(response){
                console.log("%j", response);
                console.log(response.status);
                if(response.status === "success"){
                    swal("Good job!!", 
                        "Promo code applied Successfully!",
                        "success"
                        ).then(() => {
                            reloadPage();
                        });
                    }else{
                    swal("Humm...", "Promo code no longervalid","error");
                    }   
                }
            })
        }

PHP

if(isset($arr)){
        //Add array to session variable 
        //** Only one code can be apply at the time . will override
        $_SESSION['promo-code'] = $arr; 
        //Success response 
        echo json_encode(array(
            'status' => 'success',
            'message'=> $arr, //For debugging only , will be replaced to success message 
        ));
    }else {
        echo json_encode(array(
            'status' => 'error',
            'message'=> 'error message'
        ));
    }

It's only for a school project. Thanks!!

Ive tried switching "success" to "error" but it is simply not evaluating .I'm new to ajax or php but I believe to have seen others makes it work that way.

Answer 1

The problem one is that response is in JSON. So you have to convert it into JS object and then you can get status. Here is the updated Code:-

function applyPromo(){
   var promo = $("#promo-code-value").val().trim();
   console.log(promo);
    $.ajax({
      url:"get-promo.php",
      type: "POST",
      data:{ getpromo : promo},
      success: function(response){
         let response = JSON.parse(response);
         console.log("%j", response);
         console.log(response.status);
         if(response.status === "success"){
            swal("Good job!!", 
              "Promo code applied Successfully!",
              "success"
            ).then(() => {
               reloadPage();
            });
         }else{
            swal("Humm...", "Promo code no longervalid","error");
         }   
      }
    })
  }

The second problem is that, you are not using session_start(). Here is the updated code:-

if(isset($arr)){
  //Add array to session variable 
  //** Only one code can be apply at the time . will override
  session_start();
  $_SESSION['promo-code'] = $arr; 
  //Success response 
  echo json_encode(array(
     'status' => 'success',
     'message'=> $arr, //For debugging only , will be replaced to success message 
  ));
}else {
  echo json_encode(array(
    'status' => 'error',
    'message'=> 'error message'
  ));
}