SyntaxError: missing ; before statement

I want to build one Java web Application, In this I have one JSP Page when this page is loaded it gives the following error :

SyntaxError: missing ; before statement

My JSP Page code is below :

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Organization</title>
<link rel="stylesheet" href="css/jquery-ui.css">
<script src="js/jquery-1.12.4.js"></script>
<script src="js/jquery-ui.js"></script>
<script>
    $(function() {
        alert("Inside1");
        var reqStatus = '${orgStatus}';
        alert("Inside2");
        var orgJson = '${reqOrgJson}';
        alert("Inside3");
        alert("reqStatus>>>"+reqStatus);
        alert("orgJson>>>>"+orgJson);

        if(reqStatus != "" || orgJson != "") {
            //alert("1>>>>>>>>>");
            if(reqStatus == "false") {
                document.getElementById("lblError").style.display = '';
            }
            else {
                document.getElementById("lblError").style.display = 'none';
            }

            var availableTutorials = [];
            if(orgJson != "") {
                var parsed = JSON.parse(orgJson);
                for(var x in orgJson) {
                    if(parsed[x] != undefined) {
                        availableTutorials.push(parsed[x]);
                    }
                }
            }

            $("#txtOrgName").autocomplete({source: availableTutorials});
        }
        else {
            //alert("2>>>>>>>>>");
            window.location.href = "index.jsp";
        }
    });

    function validateOrg() {
        var orgName = document.getElementById("txtOrgName");
        if (orgName.value.trim().length == 0) {
            alert("Enter Org Name");
            return false;
        }
    }
</script>
</head>
<body>
    <form name="orgname" action="org_name" method="post">
        <table align="center">
            <tr align="center">
                <td colspan="4"><img src="images/logo.jpg" /></td>
            </tr>
            <tr>
                <td>Organization :</td>
                <td><input type="text" id="txtOrgName" name="txtOrgName" /><label style="color: red;">*</label></td>
            </tr>
            <tr>
                <td align="center" colspan=2><br/><input type="submit" name="btnOrgName" id="btnOrgName"
                    value="Validate" onclick="return validateOrg();" /></td>
            </tr>
        </table>
        <p align="center"><label id="lblError" style="color: red;">Error Message.</label></p>
    </form>
</body>
</html>

When I debug it on chrome it gives the error on follwoing line

var orgJson = '${reqOrgJson}';

I am recieving the below JSONArray

["XYZ","ASD.'s Group","SDF' Memorial Hospital","Fenchâçè Fâçè, Mr. - PCVC"]

into orgJson variable and this gives the error because of ' Apostrophe But i don't know how to handle this? Please help me to fix this issue. I am using Java with Eclipse.

Solution

The problem comes from your values.

var orgJson = '${reqOrgJson}';

It becomes

var orgJson = '["XYZ","ASD.'s Group","SDF' Memorial Hospital","Fenchâçè Fâçè, Mr. - PCVC"]';

Since there is a ' in the values, the String stop there, the javascript don't understand the following text.

Here, you could remove the apostrophe to create the array directly:

var orgJson = ["XYZ","ASD.'s Group","SDF' Memorial Hospital","Fenchâçè Fâçè, Mr. - PCVC"];

Simply by writing :

var orgJson = ${reqOrgJson};

No need to parse later, you directly have an array into orgJson.