why JSON.stringify() and JSON.parse does not work?

Question

I have this javascript result:

var layer = '{"type":"polygon", "coordinates": "-34.32982832836202 149.88922119140625, -34.80027235055681 149.80682373046875, -34.74161249883173 150.30120849609375, -33.99802726234876 150.77362060546875, -33.97980872872456 150.27923583984375"}';

I checked it against JSONlint.com and was told it is a valid JSON string.

why can't JSON.parse() and JSON.stringify() not work.

I'm being told by the console that JSON.parse() and JSON.stringify are not recognized functions.

Thanks.

UPDATE 1

ok. let me try this again. Sorry, was given bad info.

var polygon = new Array();
polygon.push('{"type":"polygon", "coordinates": "-34.32982832836202 149.88922119140625, -34.80027235055681 149.80682373046875, -34.74161249883173 150.30120849609375, -33.99802726234876 150.77362060546875, -33.97980872872456 150.27923583984375"}');

var layer = polygon[0]  //should be of value of string just stored
console.log(layer);  //correctly displays JSON string
console.log(JSON.parse(layer));  //line that errors.

this is a portion of the full code below:

// This example requires the Drawing library. Include the libraries=drawing
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing">
var selectedShape;
var drawingManager;
var names = [];
var polygons = new Array();


function initMap() {


    var map = new google.maps.Map(document.getElementById('map'), {
        center: {
            lat: -34.397,
            lng: 150.644
        },
        zoom: 8
    });

    drawingManager = new google.maps.drawing.DrawingManager({
        drawingMode: google.maps.drawing.OverlayType.POLYGON,
        drawingControl: true,
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: ['circle', 'polygon', 'rectangle']
        },
        polygonOptions: {
            editable: true,
            draggable: true
        },
        circleOptions: {
            editable: true,
            draggable: true
        },
        rectangleOptions: {
            editable: true,
            draggable: true
        }


    });
    drawingManager.setMap(map);

    //load preset data


    function setJSON(Shape) {
        console.log(Shape.type);
        if (Shape.type === "circle") {
            return '{"type":"'+Shape.type +'", "lat":"'+Shape.getCenter().lat()+'", "lng":"'+Shape.getCenter().lng()+'", "radius":"'+Shape.getRadius()+'"  }';
        }
        if (Shape.type === "rectangle"){
            return '{"type":"' + Shape.type + ', "start":"'+ Shape.getBounds().getNorthEast() +'", "end":"'+ Shape.getBounds().getSouthWest() +'"}';
        }
        if (Shape.type === "polygon"){
            //eturn '{"type":"'+ Shape.type +'"}' + Shape.getPaths();
            vertice = Shape.getPath();
            console.log("vertice count:  " +  vertice.getLength());
            JSON = '{"type":"'+ Shape.type +'", "coordinates": "';
            vertice.forEach(function(xy, i) {
                JSON = JSON + xy.lat() + ' ' + xy.lng() + ', ';
            });

            JSON = JSON.slice(0,-2) + '"}';
            return JSON;
        }

        return 0
    }

    google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {

        drawingManager.setMap(null);

        var newShape = event.overlay;
        newShape.type = event.type;
        selectedShape = newShape;
        console.log(setJSON(selectedShape));

        if (newShape.type === "circle" || newShape.type === "rectangle") {

            google.maps.event.addListener(selectedShape, 'bounds_changed', function(event){
                console.log(setJSON(selectedShape));
            });

        }

        if (newShape.type === "polygon") {

            google.maps.event.addListener(selectedShape.getPath(), 'set_at', function(event) {
                // complete functions
                console.log(setJSON(selectedShape));
            });

            google.maps.event.addListener(selectedShape.getPath(), 'insert_at', function(event) {
                // complete functions
                console.log(setJSON(selectedShape));
            });

            google.maps.event.addListener(selectedShape, 'rightclick', function(event) {
                // Check if click was on a vertex control point
                if (event.vertex === undefined) {
                    return;
                }
                deleteMenu.open(map, selectedShape.getPath(), event.vertex);
                console.log('right-click');
            })

        }

        function DeleteMenu() {
            this.div_ = document.createElement('div');
            this.div_.className = 'delete-menu';
            this.div_.innerHTML = 'Delete';

            var menu = this;
            google.maps.event.addDomListener(this.div_, 'click', function() {
                menu.removeVertex();
            });
        }
        DeleteMenu.prototype = new google.maps.OverlayView();

        DeleteMenu.prototype.onAdd = function() {
            var deleteMenu = this;
            var map = this.getMap();
            this.getPanes().floatPane.appendChild(this.div_);

            // mousedown anywhere on the map except on the menu div will close the
            // menu.
            this.divListener_ = google.maps.event.addDomListener(map.getDiv(), 'mousedown', function(e) {
                if (e.target != deleteMenu.div_) {
                    deleteMenu.close();
                }
            }, true);
        };

        DeleteMenu.prototype.onRemove = function() {
            google.maps.event.removeListener(this.divListener_);
            this.div_.parentNode.removeChild(this.div_);

            // clean up
            this.set('position');
            this.set('path');
            this.set('vertex');
        };

        DeleteMenu.prototype.close = function() {
            this.setMap(null);
        };

        DeleteMenu.prototype.draw = function() {
            var position = this.get('position');
            var projection = this.getProjection();

            if (!position || !projection) {
                return;
            }

            var point = projection.fromLatLngToDivPixel(position);
            this.div_.style.top = point.y + 'px';
            this.div_.style.left = point.x + 'px';
        };

        DeleteMenu.prototype.open = function(map, path, vertex) {
            this.set('position', path.getAt(vertex));
            this.set('path', path);
            this.set('vertex', vertex);
            this.setMap(map);
            this.draw();
        };

        DeleteMenu.prototype.removeVertex = function() {
            var path = this.get('path');
            var vertex = this.get('vertex');

            if (!path || vertex == undefined) {
                this.close();
                return;
            }

            path.removeAt(vertex);
            this.close();
        };

        var deleteMenu = new DeleteMenu();

    });

    google.maps.event.addDomListener(document.getElementById('btnClear'), 'click', function(event) {
        selectedShape.setMap(null);
        drawingManager.setMap(map);
    });

    google.maps.event.addDomListener(document.getElementById('save'), 'click', function(event) {
        names.push($('#polyname').val());
        polygons.push(setJSON(selectedShape));
        length = names.length;
        console.log(length);
        console.log("name:  " + names[length-1] + "; polygon:  " + polygons[length-1]);
    });

    google.maps.event.addDomListener(document.getElementById('btnrecall'), 'click', function(event) {

        $('#btnClear').click();
        console.log($('#btnLoad').val());
        var namefield = $('#btnLoad').val();
        if (namefield !== undefined){
            var polyid = names.indexOf(namefield);
            if (polyid > -1) {
                var layer = polygons[polyid];
                console.log(layer);
                console.log(JSON.parse(JSON.stringify(layer)));



            }else {
                alert("no polygon by that name.  Please Try again");
            }
        }else {
            alert("please enter a name to continue.");
        }

    });



}

You already have your object as a string with the single quotes. Do you mean to do that? — cs95
– cs95, Commented Jul 3, 2017 at 18:22
I just ran your code from UPDATE1 and it works fine, gives no errors, could you provide details as to what browser you are running it on? — N. Ivanov
– N. Ivanov, Commented Jul 3, 2017 at 18:41
all of them....I included the library I was given to give you specifics. The idea was to load the polygon array with a JSON string. the intent is to re-call the JSON string and parse it into an object for processing. — arcee123
– arcee123, Commented Jul 3, 2017 at 18:42

arcee123 · Accepted Answer · 2017-07-04 04:15:31Z

1

Apparently, while putting code in at Update #1 above, another question I had placed in stackoverflow had a direct impact on the reason for this question.

why am I getting type errors when hovering over map after layers are set?

as such, I had a variable I called JSON elsewhere in the code. using JSON as a variable overridden all of the global JSON directives, which denied access to the parse function.

Thanks all guys.

answered Jul 4, 2017 at 4:15

arcee123

30514 gold badges61 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Breaker222 Over a year ago

to systematically prevent such override-bugs in JavaScript it is important to work with naming conventions, like lowerCamelCase. In this case you would name it json instead JSON To get a good start see google.github.io/styleguide/… or here on Stackoverflow stackoverflow.com/q/921133/3313410

arcee123 Over a year ago

thanks. I did update the standards after this question...but +1 for others.

Hassan Imam · Accepted Answer · 2017-07-03 18:31:26Z

0

I am able to parse it. Check here. You can refer to this for browser issue with JSON in IE.

var layer = '{"type":"polygon", "coordinates": "-34.32982832836202 149.88922119140625, -34.80027235055681 149.80682373046875, -34.74161249883173 150.30120849609375, -33.99802726234876 150.77362060546875, -33.97980872872456 150.27923583984375"}';

console.log(JSON.parse(layer));

answered Jul 3, 2017 at 18:31

Hassan Imam

22.6k6 gold badges45 silver badges53 bronze badges

Comments

N. Ivanov · Accepted Answer · 2017-07-03 18:36:49Z

0

var layer = '{"type":"polygon", "coordinates": "-34.32982832836202 149.88922119140625, -34.80027235055681 149.80682373046875, -34.74161249883173 150.30120849609375, -33.99802726234876 150.77362060546875, -33.97980872872456 150.27923583984375"}';

$(document).ready(function() {
  // here you can directly use it as a string no need of JSON.Stringify();
  $("#string").text(layer);

  // here it is parsed as a JSON and works just fine
  $someVar = JSON.parse(layer);
  $("#object").text($someVar.type);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="string"></p>
<p id="object"></p>

EDIT: Please provide some details on what browser are you using, and maybe provide the exact javascript that is failing? It would be easier then to provide you with an exact answer.

The variable that you have provided in your question is already a string, so you do not need the use of JSON.Stringify(). You can use it directly as a string. Otherwise in the code snippet I have managed to use JSON.Parse() with no problem. Maybe try and check your code and compare it with the example? Hope this helps you out

edited Jul 3, 2017 at 18:36

answered Jul 3, 2017 at 18:27

N. Ivanov

1,8332 gold badges17 silver badges28 bronze badges

1 Comment

Lorenz Meyer Over a year ago

JavaScript is case sensitive.

Collectives™ on Stack Overflow

why JSON.stringify() and JSON.parse does not work?

UPDATE 1

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

UPDATE 1

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related