I am facing problem by using "JSON.stringify" and "Json.parse" for string. The application uses client broweser via Javascript to read a textfile (JSON string) from server via PHP.
The problem is that after I used "stringify", the output of the string printed as follow:
"
\t
{\"employees\":[{\"firstName\":\"John\",\"lastName\":\"Doe\" },{\"firstName\":\"Anna\",\"lastName\":\"Smith\" },{\"firstName\":\"Peter\",\"lastName\":\"Jones\" }]}
"
- If not using "stringify", it printed as same as the original text in the text file.
-
If I use "JSON.stringify" then "Json.parse" it show error as below:
Unexpected token < in JSON at position 0 at JSON.parse ()
The code are the following:
Sample of textfile:
{"employees":[{"firstName":"John","lastName":"Doe" },{"firstName":"Anna","lastName":"Smith" },{"firstName":"Peter","lastName":"Jones" }]}
HTML with Javascript page:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
var text = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';
function printEmployee() {
obj = JSON.parse(text);
var selEmployee = document.getElementById("selEmployee");
document.getElementById("demo").innerHTML =
obj.employees[selEmployee.selectedIndex].firstName + " " + obj.employees[selEmployee.selectedIndex].lastName;
}
function postToPhp() {
var dataString = JSON.stringify(text);
$.post("processJson.php",
{
dataString
},
function(data,status){
alert("Data: " + data + "
Status: " + status);
});
}
function postAsyncGet()
{
getToPhp()
.then(viewGetResult);
}
function getToPhp() {
var dataString;
$.get("readJson.php",
{
dataString
},
function(data,status){
alert("Data: " + data + "
Status: " + status);
viewGetResult(data);
});
}
function viewGetResult(dataString) {
var jsonstr = JSON.stringify(dataString.trim());
//var obj = JSON.parse(dataString);
document.getElementById("demo").innerHTML = dataString;
var selEmployee = document.getElementById("selEmployee");
//document.getElementById("demo").innerHTML =
//obj.employees[selEmployee.selectedIndex].firstName + " " + //obj.employees[selEmployee.selectedIndex].lastName;
}
</script>
</head>
<body>
<h2>Create Object from JSON String</h2>
<label>
Select an Employee:
</label>
<select id = "selEmployee">
<option value = "1" selected="selected">1</option>
<option value = "2">2</option>
<option value = "3">3</option>
</select>
<p><a href="#" onclick="printEmployee();">Print Me!</a></p>
<p><a href="#" onclick="postToPhp();">Post Me to PHP!</a></p>
<p><a href="#" onclick="getToPhp();">Get from PHP!</a></p>
<p id="demo"></p>
</body>
</html>
PHP Code
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<?php
$obj = json_decode($_POST["dataString"]);
echo $obj->var;
$myfile = fopen("newfile.txt", "w") or die("Unable to open file!");
fwrite($myfile, $obj );
fclose($myfile);
?>
</body>
</html>
