Display popup alert after Ajax response

Question

I have a JSON request using post method using ajax within this code

$(document).ready(function() {
  $(document).on('submit', '#registration_check', function() {
    var data = $(this).serialize();
    $.ajax({
      type: 'POST',
      url: 'apidomain.com',
      data: data,
      success: function(data) {

        $("#registration_check").fadeOut(500).hide(function() {
          $(".result_1").fadeIn(500).show(function() {
            $(".result_1").html(data);
          });
        });
      }
    });
    return false;
  });
});

the response will return 3 fields like name, email, phone on this element:

<div id="result_1"></div>

it's working nice so far, but want I plan to do is I want to display the alert or popup message if the ajax response found some of return value null. For example:

1. If JSON response return: name: jhon, email: [e-mail], phone: [phone] user will redirect to the other page (done so far)

2. But if JSON response return name: jane, email: [e-mail], phone:

The popup or alert will appeared, within text phone number empty.

Answer 1

If your data is a JSON object then you can do:

success: function(data) {
  for (var i in data) {
    if (!data[i]) {
      alert(/* MESSAGE HERE */)
      return;
    }
  }

  // Your regular code here
}

Answer 2

You can make an associative array of your values in php file and echo it in the json format like

echo json_encode($array);

Then you will receive this in your ajax response like this

  var objs = JSON.parse(data);

Then you can parse the values by keys like name, email and phone as you defined in associative array in your php file

console.log(objs.name);
console.log(objs.email);
console.log(objs.phone);

This is how you can parse the values individually. You can also apply conditions by your own way

Answer 3

First thing that comes to my mind: Do you need the JSON response in the document element or is it, that you dont know how to work with jQuery Ajax?

Anyway, this solution should help you in both cases:

$(document).ready(function()
{   
    $(document).on('submit', '#registration_check', function()
    {       
        var data = $(this).serialize();
        $.ajax({
        type : 'POST',
        url  : 'apidomain.com',
        data : data,
        dataType: 'json', // tell jQuery, that the response data will be a JSON - it will be parsed automatically
        success :  function(data)
                   {
                        // now you have a parsed JSON object in the 'data' var

                        var show_alert = false;

                        if (data.phone === null || !data.phone.length) {
                            show_alert = true;
                        }

                        if (data.email === null || !data.email.length) {
                            show_alert = true;
                        }

                        if (show_alert) {
                            alert('here is the alert :)');
                        }

                        $("#registration_check").fadeOut(500).hide(function()
                        {
                            $(".result_1").fadeIn(500).show(function()
                            {
                                $(".result_1").html(JSON.stringify(data));
                            });
                        });

                   }
        });
        return false;
    });
});