ajax调用结束后如何从ajax调用访问数据

Question

I am making a ajax calls that returns me some data from the server. I work on string function on the data that come from ajax call. From my knowledge i can see the string operation begins before the ajax call gets over. Often giving me undefined error. Here is my ajax call

 $.ajax({

        type: "POST",
        url: "/add_director",
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        success: function(data) {
            $('#addDirModal').modal('hide');
            insertDirector(data); 
        },
        error : function(xhr ,status ,error)
        {
            console.log(xhr);
            alert(xhr);
        }
    });

Here is my insertDirector function

function insertDirector(data){
      console.log(data);
      if (data.msg == "1") {
        $.each(data,function(key,value){
            var dir_name = value.dir_name;
            var dir_pan = value.dir_pan;
            var dir_din = value.dir_din;
            var dir_addr = value.dir_addr;
            var dir_id = value.id;
            var dir_img = value.dir_img;

              if (dir_name.val().length > 15) {
                var dir_r_name = dir_name.substr(0,15);
              }

              else{
                var dir_r_name = dir_name;
              }
         });
        }
       }

Here when i work on substr() it throws the error Cannot read property 'val' of undefined . I can see this is because the substr() is executed before the ajax request is completed. how do i fix this ?

EDITED

Here is the response

{"msg":"1","director":{"dir_name":"Naveen","dir_pan":"AAAAA1111B","dir_din":"123456","dir_addr":"dsadasdasdasdsadasdas","dir_img":"1490852438.jpg","user_id":3,"updated_at":"2017-03-30 05:40:38","created_at":"2017-03-30 05:40:38","id":15}}

Answer 1

Its not clear why you use the $.each here (you can omit it and use data.director instead of value ), but if it is possible that your data contain several 'director' objects and you want to iterate through all of them, then you should change the insertDirector code to skip the 'msg' key as it doesn't have dir_name, dir_plan, ... properties:

function insertDirector(data) {
  console.log(data);
  if (data.msg == "1") {
    $.each(data, function (key, value) {
      if (key == "director") { //or if (key != "msg")
        var dir_name = value.dir_name;
        var dir_pan = value.dir_pan;
        var dir_din = value.dir_din;
        var dir_addr = value.dir_addr;
        var dir_id = value.id;
        var dir_img = value.dir_img;

        var dir_r_name = (dir_name.length > 15 ? dir_name.substr(0, 15) : dir_name);
        //if (dir_name.length > 15) {
        //  var dir_r_name = dir_name.substr(0, 15);
        //}
        //else {
        //  var dir_r_name = dir_name;
        //}
      }
    });
  }
}

also, note that dir_name.val().length is wrong as dir_name is a string ( .val() is not required)

Answer 2

change

if (dir_name.val().length > 15) {
  var dir_r_name = dir_name.substr(0,15);
}

to

if (dir_name.length > 15) {
  var dir_r_name = dir_name.substr(0,15);
}

Answer 3

try this way :

function insertDirector(data) {
    console.log(data);
    if (data.msg == "1") {

        var dir_name = data.director.dir_name;
        var dir_pan = data.director.dir_pan;
        var dir_din = data.director.dir_din;
        var dir_addr = data.director.dir_addr;
        var dir_id = data.director.id;
        var dir_img = data.director.dir_img;

        if (dir_name.length > 15) {
            var dir_r_name = dir_name.substr(0, 15);
        }

        else {
            var dir_r_name = dir_name;
        }

    }
}

Answer 4

After seeing the data you posted, it is easy to find issue. Here, the issue is:

Your function:

function insertDirector(data){
      console.log(data);
      if (data.msg == "1") {
        $.each(data,function(key,value){
            var dir_name = value.dir_name;
            var dir_pan = value.dir_pan;
            var dir_din = value.dir_din;
            var dir_addr = value.dir_addr;
            var dir_id = value.id;
            var dir_img = value.dir_img;

              if (dir_name.val().length > 15) {
                var dir_r_name = dir_name.substr(0,15);
              }

              else{
                var dir_r_name = dir_name;
              }
         });
        }
       }

Here, when you do $.each, every object inside data will be traversed. Now, your first value inside data is msg:1. This is not a object . As a result, on first iteration, key is 'msg' but value is '1' . Now this value can't have dir_name so undefined is returned . As a result dir_name.val() generates error.

Try it like this:

function insertDirector(data){
      console.log(data);
      if (data.msg == "1") {
        $.each(data,function(key,value){
            if(key==="director"){
            var dir_name = value.dir_name;
            var dir_pan = value.dir_pan;
            var dir_din = value.dir_din;
            var dir_addr = value.dir_addr;
            var dir_id = value.id;
            var dir_img = value.dir_img;

              if (dir_name.val().length > 15) {
                var dir_r_name = dir_name.substr(0,15);
              }

              else{
                var dir_r_name = dir_name;
              }
            }

         });
        }
       }