未捕获的语法错误：意外标识符（Javascript、asp.net mvc、cshtml）

Question

So the error I am receiving is when I click the remove button on the dynamically created html, which is meant to call the remove method at the bottom and pass the arguments. The passing of the object as an argument is where I am running into the problems..

function addMarkerToList(args) {
        var object = args;
        var camera = args.id;
        var test = selectedCameras.indexOf(args.id);
        var noOfCamerasAllowed = @Model.usersName.CamerasSelectable;

        if (selectedCameras.length < noOfCamerasAllowed) {
            if (test > -1) {
                alert("Camera already in list");
            } else
            {
                selectedCameras.push(args.id);
                var outputString = "";
                for (i = 0; i<selectedCameras.length; i++) {
                    outputString += selectedCameras[i] + ",";
                }
                //$("#cameraSelectedList").append("<p id=" + args.id + ">" + args.id + "</p>");
                $("#cameraSelectedList").append(
                    "<div id = " + camera + " class=\"col-md-12\">" +
                        "<div class=\"col-lg-3 col-md-4 col-sm-6 col-xs-12 user-item\">" + 
                            "<div class=\"user-container\">" +
                            "<a class=\"user-avatar\"><i class=\"glyphicon glyphicon-facetime-video\" style=\"color: #ed1c24; font-size: 36px;\"></i></a>" +
                            "<p class=\"user-name\">" +
                                "<span>Camera</span>" +

This is where I think the issue is being caused:

                                "<input type=\"button\" value=\"Remove\" onclick=\"removeMarkerFromList(" + object + ")\"/>" +
                            "</p>" +
                        "</div>" + 
                    "</div>");

The directly above section is where the error is being caused, I think by how I am passing the args called (object) in the input button back the the remove method below..

                if (check === 0) {
                    $("#cameraModelPassThrough").append("<input id=" +
                        camera + ".2" + " class=\"form- control text- box single- line valid hidden\" name=\"selectedCameraList\" placeholder=\"Selected Camera ID\" type=\"text\" value=\"" +
                        outputString +
                        "\" aria-required=\"true\" aria-describedby=\"footageRequest_Incident_Location- error\" aria-invalid=\"false\">");
                    check = 1;
                    lastAddedId = (camera + ".2");
                } else {
                    //alert("This is the last added id: " + lastAddedId);
                    document.getElementById(lastAddedId).remove();
                    $("#cameraModelPassThrough").append("<input id=" +
                        camera + ".2" + " class=\"form- control text- box single- line valid hidden\" name=\"selectedCameraList\" placeholder=\"Selected Camera ID\" type=\"text\" value=\"" +
                        outputString +
                        "\" aria-required=\"true\" aria-describedby=\"footageRequest_Incident_Location- error\" aria-invalid=\"false\">");
                    check = 0;
                    lastAddedId = (camera + ".2");
                }
            }
        } else {
            alert("You have added the maximum number of cameras");
        }
    }

    //Removing objects by right clicking the marker
    function removeMarkerFromList(args) {
        var camera = args.id;
        alert(camera);
        var test = selectedCameras.indexOf(camera);
        if (test > -1) {
            document.getElementById(camera).remove();
            selectedCameras.splice(test, 1);
            alert("Camera removed from list");
        } else {
            alert("Camera not in list");
        }
        var outputString = "";
        for (i = 0; i<selectedCameras.length; i++) {
            outputString += selectedCameras[i] + ",";
        }
        document.getElementById(lastAddedId).remove();
        $("#cameraModelPassThrough").append("<input id=" +
            camera + ".2" + " class=\"form- control text- box single- line valid hidden\" name=\"selectedCameraList\" placeholder=\"Selected Camera ID\" type=\"text\" value=\"" +
            outputString +
            "\" aria-required=\"true\" aria-describedby=\"footageRequest_Incident_Location- error\" aria-invalid=\"false\">");
        check = 1;
        lastAddedId = (camera + ".2");
    }

Answer 1

You're concatenating your object into a string, which probably gives you something like

onclick="removeMarkerFromList([Object object])"

You can use an id (string or number) instead and retrieve your object afterwards:

"onclick=\"removeMarkerFromList(" + object.id + ")\"/>"

You can also stringify your object:

"onclick=\"removeMarkerFromList(" + JSON.stringify(object) + ")\"/>"

Answer 2

I managed to solve the issue by using object manipulation before passing the object to my method. Thank you everyone for your assistance!

Answer 3

In ASP.NET/MVC/.NET Core project if you are facing this issue, sometimes this might be due to cache storage refresh not happening. In my instance, I had a Redis server running and it needed a manual restart. Go to Task Manager-> Services tab and see the server you are running and restart it manually( Redis server: Memurai in case if you are using windows).