如何用JavaScript读取JSON文件并输出与手动定义一致的格式？

我来帮你搞定这个问题！你遇到的问题其实是处理JSON字符串和对象时的一个小疏忽，调整一下代码就能和手动定义的输出完全一致了。

修正后的代码 #

function readTextFile(file, callback) {
  var rawFile = new XMLHttpRequest();
  rawFile.overrideMimeType("application/json");
  rawFile.open("GET", file, true);
  rawFile.onreadystatechange = function() {
    if (rawFile.readyState === 4 && rawFile.status == "200") {
      callback(rawFile.responseText);
    }
  }
  rawFile.send(null);
}

readTextFile("http://******/demo-data.json", function(text){
  // 解析JSON字符串为JavaScript对象，和手动定义的countries结构完全一致
  var test1 = JSON.parse(text);
  // 控制台输出对象，和手动示例里的countries对象展示效果一致
  console.log(test1);
  
  // 关键修正：把解析后的对象转成JSON字符串，而非原始的响应文本
  var test2 = JSON.stringify(test1);
  // 此时输出的字符串就和手动示例中JSON.stringify(countries)的结果完全相同
  console.log(test2);
});

为什么之前的输出不符合预期？ #

• 关于test1：只要JSON.parse没有报错，解析后的test1就是和你手动定义的countries完全一样的数组对象。如果控制台显示看起来不一样，可能是浏览器控制台的默认展开方式不同，但对象的结构和内容是一致的。
• 关于test2：你之前写的JSON.stringify(text)是把原始的JSON字符串再转一次JSON字符串，相当于给整个字符串加了引号和转义符（比如原本的[{"id":1,...}]会变成"[{\"id\":1,...}]"），这显然不是你想要的格式。正确的做法是把解析后的对象test1传给JSON.stringify，这样得到的结果就和手动示例的输出完全匹配了。

更现代的替代写法（推荐） #

如果你不需要兼容旧浏览器，用fetch API会更简洁，它能直接帮你解析JSON，不用手动调用JSON.parse：

fetch("http://******/demo-data.json")
  .then(response => response.json())
  .then(countries => {
    console.log(countries); // 输出对象，和手动定义的一致
    console.log(JSON.stringify(countries)); // 输出格式化后的JSON字符串，和手动示例一致
  })
  .catch(error => console.error('读取文件失败:', error));

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