Chrome中XMLHttpRequest返回的JSON显示为字符串，如何转为树形结构？

你当前打印的request.responseText是纯字符串格式，所以控制台只会显示成一长串文本。要实现树形展示，需要把字符串解析为JavaScript对象，具体操作如下：

• 第一步：解析JSON字符串
  使用JSON.parse()方法将返回的字符串转换为JS对象，这个方法会把JSON格式的字符串转换成可被控制台识别的结构化对象。

• 第二步：打印解析后的对象
  直接打印解析后的对象，控制台会自动以树形结构展示它，你可以展开/折叠各级节点查看内容。

修改后的代码 #

const request = new XMLHttpRequest;

request.addEventListener('readystatechange', () => {
    if(request.readyState === 4){
        try {
            // 解析JSON字符串为JS对象
            const responseData = JSON.parse(request.responseText);
            // 打印结构化对象，控制台会展示树形结构
            console.log(responseData);
        } catch (error) {
            // 处理JSON解析失败的情况
            console.error('JSON解析失败:', error);
        }
    }
});

request.open('GET', 'https://jsonplaceholder.typicode.com/todos/');
request.send();

额外说明 #

• 加入try-catch是为了避免返回内容不是合法JSON时导致代码报错，增强鲁棒性。
• 你也可以使用console.dir(responseData)，效果和console.log类似，都能展示树形结构。

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