Chrome控制台为何返回JSON序列化字符串而非结构化对象？

我之前从没碰到这种情况，网上也没找到解决办法。点击提交按钮调用Clarifai API后，返回结果本该是可展开的结构化对象，但Chrome控制台显示的却是JSON序列化后的字符串，这让我查找所需信息的路径变得非常不便。

我的代码 #

onButtonSubmit = () => {
  console.log('click');
    const USER_ID = 'realvicandy';
    const PAT = '33c27a0a3f2547f789bc36bbdec57dcc';
    const APP_ID = 'my-first-application';
    // Change these to whatever model and image URL you want to use
    const MODEL_ID = 'color-recognition';
    const MODEL_VERSION_ID = 'dd9458324b4b45c2be1a7ba84d27cd04';    
    const IMAGE_URL = 'https://samples.clarifai.com/metro-north.jpg';

    const raw = JSON.stringify({
        "user_app_id": {
            "user_id": USER_ID,
            "app_id": APP_ID
        },
        "inputs": [
            {
                "data": {
                    "image": {
                        "url": IMAGE_URL
                    }
                }
            }
        ]
    });

    const requestOptions = {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Authorization': 'Key ' + PAT
        },
        body: raw
    };

    // NOTE: MODEL_VERSION_ID is optional, you can also call prediction with the MODEL_ID only
    // https://api.clarifai.com/v2/models/{YOUR_MODEL_ID}/outputs
    // this will default to the latest version_id

    fetch("https://api.clarifai.com/v2/models/" + 'color-recognition' + "/versions/" + MODEL_VERSION_ID + "/outputs", requestOptions)
        .then(response => response.text())
        .then(result => console.log(result))
        .catch(error => console.log('error', error));
}

Chrome控制台实际输出 #

{"status":{"code":10000,"description":"Ok","req_id":"368a54d959cc2cd826ad08d7caa28fac"},"outputs":[{"id":"91e04fc631014d8b804a88859a62ee7b","status":{"code":10000,"description":"Ok"},"created_at":"2022-12-07T18:00:03.033519292Z","model":{"id":"color-recognition","name":"color","created_at":"2016-05-11T18:05:45.924367Z","modified_at":"2022-11-01T19:45:15.089623Z","app_id":"main","output_info":{"message":"Show output_info with: GET /models/{model_id}/output_info"},"model_version":{"id":"dd9458324b4b45c2be1a7ba84d27cd04","created_at":"2016-07-13T01:19:12.147644Z","status":{"code":21100,"description":"Model is trained and ready"},"visibility":{"gettable":50},"app_id":"main","user_id":"clarifai","metadata":{},"output_info":{"message":"Show output_info with: GET /models/{model_id}/output_info"},"input_info":{},"train_info":{},"import_info":{}},"user_id":"clarifai","input_info":{},"train_info":{},"model_type_id":"image-color-recognizer","visibility":{"gettable":50},"metadata":null,"presets":{},"languages":[],"import_info":{},"workflow_recommended":false},"input":{"id":"845ed7176680401cbcefe9e4dd70a19b","data":{"image":{"url":"https://samples.clarifai.com/metro-north.jpg"}}},"data":{"colors":[{"raw_hex":"#513f2c","w3c":{"hex":"#696969","name":"DimGray"},"value":0.14725},{"raw_hex":"#7298e2","w3c":{"hex":"#6495ed","name":"CornflowerBlue"},"value":0.31575},{"raw_hex":"#1e181b","w3c":{"hex":"#000000","name":"Black"},"value":0.20175},{"raw_hex":"#8f714b","w3c":{"hex":"#d2b48c","name":"Tan"},"value":0.1125},{"raw_hex":"#d2c275","w3c":{"hex":"#bdb76b","name":"DarkKhaki"},"value":0.017},{"raw_hex":"#141b3c","w3c":{"hex":"#000000","name":"Black"},"value":0.12},{"raw_hex":"#404b84","w3c":{"hex":"#483d8b","name":"DarkSlateBlue"},"value":0.0705},{"raw_hex":"#e5e1cc","w3c":{"hex":"#faebd7","name":"AntiqueWhite"},"value":0.01525}]}}]}

期望结果 #

Chrome控制台返回可展开的结构化对象

解决方案 #

问题出在响应处理方式上：你用了response.text()，这个方法会直接把API返回的JSON数据转换成字符串格式。要得到可展开的结构化对象，只需要把response.text()替换成response.json()，这个方法会自动将JSON字符串解析为JavaScript对象。

修改后的核心代码片段（重点修改部分已标注）：

fetch("https://api.clarifai.com/v2/models/" + 'color-recognition' + "/versions/" + MODEL_VERSION_ID + "/outputs", requestOptions)
    // 将response.text()替换为response.json()
    .then(response => response.json())
    .then(result => console.log(result))
    .catch(error => console.log('error', error));

修改后重新运行，Chrome控制台就会显示可展开的层级化对象，你可以轻松展开节点查找所需信息。

内容的提问来源于stack exchange，提问作者Victor Anderson