yanxi foo yanxi foo - 5 days ago 4
Javascript Question

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. :((

Answer

If you look at the syntax highlighting for the data you output

[{
    "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"
}]

You should immediately see the problem

    "item_image":kimchi fried rice.jpg,
    "item_description":aromatic fried rice,

No " around those to values

Comments