json 객체에 액세스하면 정의되지 않음

저는 Ajax와 Json을 처음 사용합니다. Java 서블릿에서 데이터를 요청하기 위해 Ajax를 사용하고 있으며 JSON 배열을 얻고 있습니다. 이제 액세스를 시도하고 있지만 정의되지 않은 것으로 표시됩니다. 또한 이미지를 표시하려고합니다. 데이터베이스에서 이미지 이름을 얻고 세션 변수를 사용하여 이미지 경로를 추가합니다.

JSP 파일

<div class="search-container">
        <form id="form" name="form">
            <input type="text" id="docName" name="docSearch" placeholder="Search for any doctor by name..." style="width:30%">
            <button type="button" class="btn btn-success" id="mybtn" onclick="searchDoc()">Search</button>
        </form>
    </div>
    <br>
    <div id="img"></div>    

내 서블릿

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        Connection con = null;
        PreparedStatement ps = null;
        ResultSet rs = null;
        PrintWriter out=response.getWriter();
        HttpSession session=request.getSession(false);
        GetUserDetails details=new GetUserDetails();

        response.setContentType("application/json"); 

        String name=request.getParameter("val");
        String sql ="select fName,lName,exp,fees,user_img,username,mob,addr,email from users where fName='"+name+"'";
        String special="";
        String degree="";

        if(name==null||name.trim().equals(""))
            out.print("<p>Please enter name!</p>");
        else {
            List<Bean> docSearchList=new ArrayList<Bean>();
            try {
                con=DBConnection.createConnection();
                ps=con.prepareStatement(sql);
                rs=ps.executeQuery();
                while(rs.next()) {
                    List<String> list=details.getSpecialByUsername(rs.getString("username"));
                    special+=list.get(0);
                    for(String s:list) {
                        if(s.equals(special)) {}
                        else 
                            special+=", "+s;
                    }
                    list=details.getDegByUsername(rs.getString("username"));
                    degree+=list.get(0);
                    for(String s:list) {
                        if(s.equals(degree)) {}
                        else 
                            degree+=", "+s;
                    }
                    Bean docSearchBean=new Bean();
                    
                    docSearchBean.setfName(rs.getString("fName"));
                    docSearchBean.setlName(rs.getString("lName"));
                    docSearchBean.setExperience(rs.getString("exp"));
                    docSearchBean.setFees(rs.getString("fees"));
                    docSearchBean.setUserImage(session.getAttribute("patientSearchImage")+rs.getString("user_img"));
                    docSearchBean.setMobile(rs.getString("mob"));
                    docSearchBean.setAddress(rs.getString("addr"));
                    docSearchBean.setEmail(rs.getString("email"));
                    docSearchList.add(docSearchBean);
                }
            }catch (Exception e) {
                e.printStackTrace();
            }
            Gson gson=new Gson();
            JsonElement element=gson.toJsonTree(docSearchList,new TypeToken<List<Bean>>() {}.getType());
            
            JsonArray jsonArray=element.getAsJsonArray();
            response.setContentType("application/json");
            response.getWriter().print(jsonArray);
        } 
    }
}

내 Js 파일

function searchDoc() {
    var request = new XMLHttpRequest();
    var name = document.form.docSearch.value;
    var url = "/Doctor_Appointment_Application/PatientSearch?val=" + name;
    request.open("GET", url, true);
    request.responseType = 'text';
    request.send();
    
    try {
        request.onload = function() {
        var val = request.responseText;
        var targetDiv=document.getElementById("img").innerHTML=val;

/*      var parsed=JSON.parse(val);
*/              
        var image=document.createElement("img");
        image.src=val.img;
        image.className+="img";
        
        var targetDiv=document.getElementById("img");
        targetDiv.appendChild(image);

        
/*      console.log(parsed.img);
        console.log(parsed.fName);  
        console.log(parsed.lName);  
        console.log(parsed.username);
        console.log(parsed.exp);    
        console.log(parsed.fees);   
        console.log(parsed.special);    
        console.log(parsed.degree); 

        
        var p=document.createElement("p");
        p.innerHTML=parsed.fName;

        var p1=document.createElement("p");
        p1.innerHTML=parsed.lName;

        var p2=document.createElement("p");
        p2.innerHTML=parsed.username;

        var p3=document.createElement("p");
        p3.innerHTML=parsed.exp;

        var p4=document.createElement("p");
        p4.innerHTML=parsed.fees;

        var p5=document.createElement("p");
        p5.innerHTML=parsed.special;

        var p6=document.createElement("p");
        p6.innerHTML=parsed.degree;
                
        var targetDiv=document.getElementById("img");
        targetDiv.appendChild(image);
        targetDiv.appendChild(p);
        targetDiv.appendChild(p1);
        targetDiv.appendChild(p2);
        targetDiv.appendChild(p3);
        targetDiv.appendChild(p4);
        targetDiv.appendChild(p5);
        targetDiv.appendChild(p6);
*/              
            }//end of function 
        } catch (e) {
            alert("Unable to connect to server");
    }
}

내 JS 파일에서 몇 가지 주석을 볼 수 있습니다. 내 의견에서 JSON 객체를 js 객체로 구문 분석하고 그런 방식으로 액세스하려고 시도했지만 여전히 정의되지 않은 것으로 표시됩니다. 세션 변수에 저장된 이미지의 경로 :-String patientSearchImage="IMG\\";

모든 제안을 주시면 감사하겠습니다. 감사합니다 :)