调用JSON.parse ()函数对字符串对象进行转化的时候，报错Unexpected end of JSON input

Question

具体的代码如下：先从前端读取的json文件中获取内容再进行转化：

function handleFiles() {
    var selectedFile = document.getElementById("files").files[0];//获取读取的File对象
    var name = selectedFile.name;//读取选中文件的文件名
    var size = selectedFile.size;//读取选中文件的大小
    console.log("文件名:"+name+"大小："+size);
    var reader = new FileReader();
    reader.readAsText(selectedFile);//读取文件的内容
        // 下面这一行报错了！！！！
    var json = JSON.parse(reader.result.toString().replace(/\n/g, ''));
    var temp = 0;
     for(i=0;i< length(json);i++){
        for(j=0;j<length(json)-i-1;j++){
            if(json[j+1].value>json[j].value){
                temp = json[j+1];
                json[j+1] = json[j];
                json[j] = temp;
            }
        }
    }
    return json;

但如果设置断点调试则可以进行，是为什么？

Answer 1

因为FileReader()读取文件的过程是异步执行的，只有在onload事件中才能正确的获取result

    var reader = new FileReader();
    reader.readAsText(selectedFile);//读取文件的内容
    reader.onload = function () {//文件读取完毕
        console.log(reader.result);
    }

另外因为是异步获取数据，你的handleFiles函数也就不能通过return 返回数据，要用回调函数的方式传递数据。

用回调函数的方式

function handleFiles(callback) {
    var selectedFile = document.getElementById("files").files[0];//获取读取的File对象
    var name = selectedFile.name;//读取选中文件的文件名
    var size = selectedFile.size;//读取选中文件的大小
    console.log("文件名:"+name+"大小："+size);
    var reader = new FileReader();

    reader.onload = function () {//文件读取完毕
        var json = JSON.parse(reader.result.toString().replace(/\n/g, ''));
        var temp = 0;
         for(i=0;i< length(json);i++){
            for(j=0;j<length(json)-i-1;j++){
                if(json[j+1].value>json[j].value){
                    temp = json[j+1];
                    json[j+1] = json[j];
                    json[j] = temp;
                }
            }
        }
        callback(json);
    }
    reader.readAsText(selectedFile);//读取文件的内容
}

//调用时

handleFiles(function (json) {
    console.log(json);
    获取数据，以及之后的所有操作都放在这里
})