訪問 json 對象給出 undefined

Question

我是 Ajax 和 Json 的新手。 我正在使用 Ajax 從 java servlet 請求數據，並且我得到了一個 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\\\\";

任何建議，將不勝感激。 謝謝 ：）

Answer 1

我解決了這個錯誤。 我將告訴您我是如何做到的，以便您可以參考。 如果你有一個像 [{"fName":"Samanyu","lName":"Mehra"},{"fName":"Rajesh","lName":"Khanna"}] 這樣的 JSON 數組。 然后你只需要解析 JSON 對象，然后使用 for 循環訪問它。

var parsed=JSON.parse(val);
for(i in parsed){
    console.log(parsed[i]["fName"]);
}