Read textfile (Json) from server and send to client (Javascript)

1
votes

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:

"\r\n\r\n\r\n\t\r\n\r\n\r\n\r\n\r\n{\"employees\":[{\"firstName\":\"John\",\"lastName\":\"Doe\" },{\"firstName\":\"Anna\",\"lastName\":\"Smith\" },{\"firstName\":\"Peter\",\"lastName\":\"Jones\" }]}\r\n\r\n"
  • 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 + "\nStatus: " + status);
            });
    }

    function postAsyncGet()
    {
        getToPhp()
            .then(viewGetResult);   
    }

    function getToPhp() {

        var dataString;

        $.get("readJson.php",
            {
              dataString
            },
            function(data,status){
                alert("Data: " + data + "\nStatus: " + 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>
1
javascriptphpjqueryjson

1 Answers