Uncaught TypeError: Cannot read property 'length' of undefined error even Naming is correct
<p>This is my servlet</p>

<pre><code>jsonObject.add("MessageInfo", jsonElement);
out.print(jsonObject);
</code></pre>

<p>and this is my javacript file</p>

<pre><code>$.ajax({
    type : "POST",
    url : "GetConversation",
    response : "json",
    data : "rideID="+rideID,
    // if received a response from the server
    success : function(data, textStatus, jqXHR) {
        console.log("success");
        console.log(data.MessageInfo);
            $.each(data.MessageInfo, function(index, value) {
                console.log("Data Found");
                var eachrow = "&lt;div class='conversation'&gt;"
                    +"&lt;div class='bubble'&gt;"
                    +value.messageBody
                    +"&lt;div class='pic'&gt;" 
                    +"&lt;/div&gt;"; 
                $('.messageContainer').prepend(eachrow);
            }); 
    },
    // If there was no resonse from the server
    error : function(jqXHR, textStatus, errorThrown) {
        // alert("Something really bad happened " + textStatus);
    }
});
</code></pre>

<p>I am sending a AJAX request to my servlet and receiving response, but when I parse it to my jsp page using $.each loop I am getting this error.</p>

<blockquote>
  <p>Uncaught TypeError: Cannot read property 'length' of undefined error</p>
</blockquote>

<p>Here is a screenshot of response as well.</p>

<p><a href="https://i.stack.imgur.com/SldEl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SldEl.png" alt="enter image description here"></a></p>

<p>How is this caused and how can I solve it?</p>