【问题标题】：why JSON.stringify() and JSON.parse does not work?为什么 JSON.stringify() 和 JSON.parse 不起作用？
【发布时间】：2017-07-03 18:19:22
【问题描述】：

我有这个 javascript 结果：

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"}';

我在 JSONlint.com 上检查了它，并被告知它是一个有效的 JSON 字符串。

为什么JSON.parse() 和JSON.stringify() 不能工作。

控制台告诉我JSON.parse() 和JSON.stringify 不是可识别的函数。

谢谢。

更新 1

好的。让我再试一次。抱歉，收到了错误的信息。

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 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.");
        }

    });



}

【问题讨论】：

确实有效。
您已经将对象作为带有单引号的字符串。你的意思是这样做吗？
它对我来说很好用。你在使用 JSON.parse(layer) 吗？
我刚刚从 UPDATE1 运行了您的代码，它运行良好，没有错误，您能否提供有关您在哪个浏览器上运行它的详细信息？
所有这些......我包括了我被给予的图书馆，以便为您提供具体信息。想法是使用 JSON 字符串加载多边形数组。目的是重新调用 JSON 字符串并将其解析为对象进行处理。

标签： javascript json

【解决方案1】：

显然，在上面的 Update #1 中放入代码时，我在 stackoverflow 中提出的另一个问题直接影响了这个问题的原因。

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

因此，我在代码的其他地方有一个变量，我称之为JSON。使用JSON 作为变量覆盖了所有全局JSON 指令，这些指令拒绝访问parse 函数。

谢谢大家。

【讨论】：

为了系统地防止 JavaScript 中的此类覆盖错误，使用命名约定很重要，例如 lowerCamelCase。在这种情况下，您可以将其命名为 json 而不是 JSON 要获得良好的开始，请参阅 google.github.io/styleguide/… 或在 Stackoverflow 上 stackoverflow.com/q/921133/3313410
谢谢。我确实在这个问题之后更新了标准......但为其他人+1。

【解决方案2】：

我能够解析它。在这里检查。 IE中JSON的浏览器问题可以参考this。

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));

【讨论】：

【解决方案3】：

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>

编辑： 请提供有关您使用的浏览器的一些详细信息，并可能提供失败的确切 javascript？那么为您提供准确的答案会更容易。

您在问题中提供的变量已经是一个字符串，因此您不需要使用JSON.Stringify()。您可以直接将其用作字符串。否则，在代码 sn-p 中，我设法毫无问题地使用JSON.Parse()。也许尝试检查您的代码并将其与示例进行比较？希望对你有所帮助

【讨论】：

JavaScript 区分大小写。