Unable to alert response in javascript array

I am a newbie at using jquery and stuffs so pardon me for my lack of explanation or for using the wrong terms.

Currently i have problems displaying my html as it shows a blank page. I tried to debug my php and it seems like there is no error there. When i tried typing the url on browser i can display this for example:

[{"vendorid":1,"vendor_name":"Korean stall","item_id":"1","item_name":"kimchi fried rice","item_image":kimchi fried rice.jpg,"item_description":aromatic fried rice,"price":"3.00","available":"Yes"}]

The vendorid is taken from the image in the previous page by appending to the table using this code:

<a href='#' class='ui-img' onClick='window.location=&quot;shop.html?vendorid=" + arr[i].vendorid + "&quot;'><img src='" + serverURL() + "/images/" + arr[i].imagefile + "' height='150'>

In javascript, i am able to alert(url) and get the vendorid. But i can't alert out the array in alert(response) as nothing comes out. However, when i tried the onclick="shop()"; without getting any vendorid, my alert(url) displays vendorid=undefined, followed on by the second alert, alert=[].

This is my javascript:

    function getShopDetails() {
            var xmlhttp = new XMLHttpRequest();
            var url = serverURL() + "/shop.php";
            url += "?vendorid=" + decodeURIComponent(getUrlVars()["vendorid"]);

            **alert(url);**
            xmlhttp.onreadystatechange=function() {
                 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                     displayShopDetails(xmlhttp.responseText);
                 }
            }
            xmlhttp.open("GET", url, true);
            xmlhttp.send();     
    }

    function displayShopDetails(response){
        var arr = JSON.parse(**response**);
        **alert(response);**
        var i;

        $(**"#mybody"**).find("tr").remove();
        for(i = 0; i < arr.length; i++) {

        $(**"#mybody"**).append( 
            "<tr><td>" + arr[i].vendorID + 
            "</td><td>" + arr[i].vendor_name +
            "</td><td>" + arr[i].itemname +
            "</td><td>" + arr[i].price +
            "</td><td>" + arr[i].item_description + "</td></tr>"
        );

        }

        $(**"#itemtable"**).table("refresh");
   }

    getShopDetails(); 

This is my html to display the table:

    <div data-role="content" class="ui-content" id=**"itemtable"**> 
        <table data-role="table" data-mode="reflow" class="ui-responsive" id="homey">
            <tbody id=**"mybody"**>
            </tbody>
        </table>            
    </div>   

Not sure if this is needed.. but this is my php:

    <?php 
    header("Access-Control-Allow-Origin: *"); 
    header("Content-Type: application/json; charset=UTF-8"); 

    $conn = new mysqli(XXXXX);
    $vendorid = $_GET['vendorid']; 
    $result = $conn->query("select * from menu where vendorid = '" . $vendorid . "'");

    $outp = "["; 
    while($rs = $result->fetch_array(MYSQLI_ASSOC)) {  
        if ($outp != "[") {$outp .= ",";}  
        $outp .= '{"vendorid":'  . $rs["vendorid"] . ',';  
        $outp .= '"vendor_name":"' . $rs["vendor_name"] . '",';  
        $outp .= '"item_id":"' . $rs["item_id"] . '",';  
        $outp .= '"item_name":"' . $rs["item_name"] . '",';  
        $outp .= '"item_image":' . $rs["item_image"] . ',';  
        $outp .= '"item_description":' . $rs["item_description"] . ',';  
        $outp .= '"price":"' . $rs["price"] . '",';  
        $outp .= '"available":"' . $rs["available"] . '"}'; } 

    $outp .="]"; 
    $conn->close(); 
    echo($outp); 
    ?> 

Does anyone knows why can't i alert out the array in alert(response)? Sorry for the lengthy post. :((