How can I return indexed two-dimensional array from PHP to JavaScript
Question
I need to return indexed two-dimensional array from PHP to JavaScript. I have been searching for solution for days. On client side I have on-change event (in option select) calling JavaScript function which executes a php file. This php file creates a 2 dimensional array from csv file, encodes that array with json. However, when I try to access elements of the array in JavaScript it gives me "undefined". HTML file:
<head>
<script type="text/JavaScript">
var d;
function sendIt() {
if (d) document.body.removeChild(d);
var xmlhttp;
var state=arguments[0].options[arguments[0].selectedIndex].value
d = document.createElement("script");
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200) //ready
{
document.getElementById("arrayresult").innerHTML=xmlhttp.arrayFromPhp;
}
}
xmlhttp.open("GET","recordsbystate.php?state=" + state,true);
xmlhttp.send();
d.type = "text/javascript";
document.body.appendChild(d);
}
</script>
</head>
<body>
<select name="state" onChange="sendIt(this)">
<option selected="selected">Select State</option>
<option value="CA">CA</option>
<option value="CO">CO</option>
<option value="MA">MA</option>
<option value="TX">TX</option>
</select>
<div id="arrayresult"></div>
</body>
</html>
PHP file:
$file = 'event_submission.csv';
$data2DArray = array();
$state = $_REQUEST['state'];
echo($state), "\n\n";
//create table with header and column names
print('<table align="left" width="430">');
print('<tr><th colspan="4">AOM DAY 2014</th></tr>');
print('<tr><th>Company</th><th>City</th><th>State</th><th>Event Date</th><th>Event Details</th></tr>');
$delimiter = ",";
if (($handle = fopen($file, "r")) !== FALSE) {
$i = 0;
while (($lineArray = fgetcsv($handle, 10000, $delimiter)) !== FALSE) {
if ($lineArray[7] == $state) {
for ($j=0; $j<count($lineArray); $j++) {
$data2DArray[$i][$j] = $lineArray[$j];
}
print('<tr><td>'.$data2DArray[$i][0].'</td><td>'.$data2DArray[$i][6].'</td><td>'.$data2DArray[$i][7].'</td><td>'.$data2DArray[$i][10].'</td></tr>');
}
$i++;
}
fclose($handle);
}
$json = json_encode($data2DArray);
echo 'var arrayFromPhp = ' . $json . ';';
return true;
?>
Any suggestions? Please help....
1 answers
solution1
1 2014-08-10 22:45:05
You're not really returning JSON. When you do echo 'var arrayFromPhp = ' . $json . ';'; echo 'var arrayFromPhp = ' . $json . ';'; , it's no longer valid JSON, just echo the JSON without the other crap and convert it on the clientside to an object.
In PHP do
$json = json_encode($data2DArray);
echo $json;
and in javascript you'd do
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("arrayresult").innerHTML = xmlhttp.responseText;
}
to parse the JSON to a javascript object, you'd use
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
var obj = JSON.parse( xmlhttp.responseText );
document.getElementById("arrayresult").innerHTML = obj.someKey;
}
but note that innerHTML expects a string, not an object.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.