如何获取对象的特定部分作为字符串

Question

I am trying to get data from a server depends on logged in user's name.

I succeed to get correct object, but I failed to get only certain part of it.

getDepartmentByEmp : function (){
    var empName = $.trim($(".temp-test").html());
    console.log(empName);
    $.ajax({
        contentType : "application/json",
        dataType : 'json',
        type : "GET",
        url : "<c:url value='/app/general/add/getDepartment/'/>" + empName,
        complete : function(data) {
            $("#docDepartment").val(data.responseText);
            $("#docDepartment").prev().html(data.responseText);
            console.log(data.responseText);
            console.log(typeof data.responseText);
        }
    });
},

That empName gets each logged in users' empNameTrim value in my DB. The type of data is object and responseText is string.

And its output looks like following:

I want to make the value of docDepartment equals to the value of department which will be SM in this case.

Thank you in advance.

EDIT : I followed Loïc Faure-Lacroix's tips, modified my code like following:

1st

getDepartmentByEmp : function (){
    var empName = $.trim($(".temp-test").html());
    console.log(empName);
    $.ajax({
        contentType : "application/json",
        dataType : 'json',
        type : "GET",
        url : "<c:url value='/app/general/add/getDepartment/'/>" + empName,
        complete : function(data) {
            var doc = JSON.parse(data.responseText);
            $("#docDepartment").val(doc.department);
            $("#docDepartment").prev().html(doc.department);
            console.log(doc.department);
            console.log(typeof doc.department);
        }
    });
},

2nd

getDepartmentByEmp : function (){
    var empName = $.trim($(".temp-test").html());
    console.log(empName);
    $.ajax({
        contentType : "application/json",
        dataType : 'json',
        type : "GET",
        url : "<c:url value='/app/general/add/getDepartment/'/>" + empName,
        complete : function(data) {
            $("#docDepartment").val(data.responseJSON.department);
            $("#docDepartment").prev().html(data.responseJSON.department);
            console.log(data.responseJSON.department);
            console.log(typeof data.responseJSON.department);
        }
    });
},

3rd

getDepartmentByEmp : function (){
    var empName = $.trim($(".temp-test").html());
    console.log(empName);
    $.ajax({
        contentType : "application/json",
        dataType : 'json',
        type : "GET",
        url : "<c:url value='/app/general/add/getDepartment/'/>" + empName,
    })
    .done(function (data) {
        $("#docDepartment").val(data.department);
        $("#docDepartment").prev().html(data.department);
        console.log(data.department);
        console.log(typeof data.department);
    })
},

All of them works fine. Choose whatever you like.

Answer 1

If jQuery isn't parsing to JSON, use JSON.parse to do it on the responseText... That said, according to the documentation here , if you go to the data types section, you should read the following:

If json is specified, the response is parsed using jQuery.parseJSON before being passed, as an object, to the success handler. The parsed JSON object is made available through the responseJSON property of the jqXHR object.

So you should be using this:

$("#docDepartment").val(data.responseJSON.department)

But to make your code cleaner, It might be better to use the following form:

getDepartmentByEmp : function (){
    var empName = $.trim($(".temp-test").html());
    console.log(empName);
    var request = $.ajax({
        contentType : "application/json",
        dataType : 'json',
        type : "GET",
        url : "<c:url value='/app/general/add/getDepartment/'/>" + empName,
    })
    request.done(function (data) {
      $("#docDepartment").val(data.department);
      $("#docDepartment").prev().html(data);
      console.log(data);
      console.log(typeof data);
    })
    request.fail(function () {
       ...
    })
},

The main difference is that the done callback should be called with the final data. While the complete one is called with a jqXHR object. It will get called only on success while complete is always called even on errors.

Answer 2

If I understand your question correctly, you need to parse the JSON object. I believe jQuery makes your response JSON automagically. So, the following should work for you.

 $("#docDepartment").val(data.responseText.department);