为什么JSON.stringify()和JSON.parse不起作用?

时间:2017-07-03 18:19:23

标签: javascript json

我有这个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.");
        }

    });



}

3 个答案:

答案 0 :(得分:1)

显然,在将代码置于上面的更新#1时,我在stackoverflow中提出的另一个问题直接影响了这个问题的原因。

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

因此,我有一个变量,我在代码中的其他地方调用了JSON。使用JSON作为变量重写了所有全局JSON指令,这些指令拒绝访问parse函数。

谢谢所有人。

答案 1 :(得分: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>
修改 请提供一些有关您使用的浏览器的详细信息,并提供失败的确切javascript?那么为您提供一个确切的答案会更容易。

您在问题中提供的变量已经是字符串,因此您不需要使用JSON.Stringify()。您可以直接将其用作字符串。否则,在代码段中,我设法使用JSON.Parse()没有问题。也许尝试检查您的代码并将其与示例进行比较? 希望这可以帮助你

答案 2 :(得分:0)

我能够解析它。点击这里您可以参考this了解IE中的JSON浏览器问题。

&#13;
&#13;
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));
&#13;
&#13;
&#13;