首页 > 解决方案 > Javascript JSON.parse() 无法处理有效的 JSON 字符串

问题描述

我查看了所有与我类似的问题,但在我的代码或 JSON 字符串中找不到任何明显的错误。

该脚本向 Web 服务发送一个请求,该服务返回一个 JSON 格式的字符串。不知何故,与调试相关的 html 被添加到 JSON 字符串的末尾,因此我使用 string.slice 方法将其删除,仅返回左方括号和右方括号之间的内容。当我输出切片时,一切都在那里。当我在 jsonlint 中检查结果切片是否有正确的 JSON 格式时,它通过了。但是当我尝试解析字符串并创建解析数据的警报时,我收到一个错误:XMLHttpRequest.request.onload 处的 Uncaught SyntaxError: Unexpected end of JSON input at JSON.parse )

这是切片后的 JSON 字符串,直接取自 jsonlint 输出:

[{
    "user_id": "23",
    "name": "Steven Marsden",
    "email": "naturevet1@gmail.com",
    "password": "$2y$10$FjDZAugd2Mj9tw.z8U1mWexLF0vkD7jnB5xusGyClDUXZwQC6u9iy",
    "address": "2639 Valley Rdg Rd, Blairmore, AB T0K 0E0, Canada",
    "lat": "49.617134",
    "lng": "-114.388893",
    "created_at": "2021-06-06 18:00:20",
    "updated_at": "2021-06-06 18:00:20",
    "services": [{
        "u_s_id": "2",
        "user_id": "23",
        "mode": "seek",
        "service": "pet sitting",
        "details": "I have a dragon",
        "img_file": null
    }, {
        "u_s_id": "3",
        "user_id": "23",
        "mode": "offer",
        "service": "pet sitting",
        "details": "I love dragons",
        "img_file": null
    }, {
        "u_s_id": "7",
        "user_id": "23",
        "mode": "offer",
        "service": "pet foster home",
        "details": "Is it okay if my dragon eats your pet?",
        "img_file": null
    }],
    "color": "red"
}]

这是请求字符串并尝试解析它的 javascript:

        var url = 'http://localhost/helpinghands/public/index.php/services/getUsers';//Gets all users, complete with services offered and the appropriate marker color
    var request = new XMLHttpRequest();
    request.open('GET',url);
    request.onload = function(){
        if(request.status === 200){
            var resp = request.responseText;
            var slice = resp.slice(resp.indexOf('['),resp.indexOf(']')+1);//Cleaves any extraneous info from end of string to avoid JSON parse errors
            var data = JSON.parse(slice);
            //var userLat = Number(data[0].lat);           
            alert(data);
                
            //var userLong = Number(data.lng);
            //const loc = new point(userLat,userLong);//This is the location from the database for that user
            

            //create marker object for loc by passing Marker constructor references to the loc and map objects, which are assigned to position and map variables, respectively 
            //const marker = new google.maps.Marker({map: map,position: loc, title: data.name});
      }
    };

谁能帮我吗?

以下是 Web 服务的输出:

[{
    "user_id": "23",
    "name": "Steven Marsden",
    "email": "naturevet1@gmail.com",
    "password": "$2y$10$FjDZAugd2Mj9tw.z8U1mWexLF0vkD7jnB5xusGyClDUXZwQC6u9iy",
    "address": "2639 Valley Rdg Rd, Blairmore, AB T0K 0E0, Canada",
    "lat": "49.617134",
    "lng": "-114.388893",
    "created_at": "2021-06-06 18:00:20",
    "updated_at": "2021-06-06 18:00:20",
    "services": [{
        "u_s_id": "2",
        "user_id": "23",
        "mode": "seek",
        "service": "pet sitting",
        "details": "I have a dragon",
        "img_file": null
    }, {
        "u_s_id": "3",
        "user_id": "23",
        "mode": "offer",
        "service": "pet sitting",
        "details": "I love dragons",
        "img_file": null
    }, {
        "u_s_id": "7",
        "user_id": "23",
        "mode": "offer",
        "service": "pet foster home",
        "details": "Is it okay if my dragon eats your pet?",
        "img_file": null
    }],
    "color": "red"
}]

标签: javascriptjsonparsing

解决方案


var slice = resp.slice(resp.indexOf('['),resp.indexOf(']')+1)

应用于您的示例 JSON 的此函数将切断 first 之后的所有内容],这是嵌套在 下的数组services,这意味着 json 数组中的第一个对象将最终未关闭,以及包装整个响应的 json 数组。

您应该修复在 JSON 有效负载中返回 HTML 的服务器中的错误。

如果这不可行,那么您将需要检测 HTML 的开头并从那里剪切,尽管由于此错误的服务器端点,您可能会继续遇到更多错误


推荐阅读