javascript - 如何读取通过 cordova 文件插件写入的对象？

Question

我阅读了 Cordova 的 documentation对于 android 平台，代码被 chop 并试图用它在文本文件上编写 JS 对象。对象已成功写入，但当我使用 FileReader API 读取它时，无法按预期获得输出。

function writeFile(fileEntry, dataObj, isAppend) {
    // Create a FileWriter object for our FileEntry (log.txt).
    fileEntry.createWriter(function (fileWriter) {

        fileWriter.onwriteend = function() {
            console.log("Successful file read...");
            readFile(fileEntry);
        };

        fileWriter.onerror = function (e) {
            console.log("Failed file read: " + e.toString());
        };

        // If we are appending data to file, go to the end of the file.
        if (isAppend) {
            try {
                fileWriter.seek(fileWriter.length);
            }
            catch (e) {
                console.log("file doesn't exist!");
            }
        }
        fileWriter.write(dataObj);
    });
}

function readFile(fileEntry) {

    fileEntry.file(function (file) {
        var reader = new FileReader();

        reader.onloadend = function() {
            console.log("Successful file read: " + this.result);

            //displayFileData(fileEntry.fullPath + ": " + this.result);
        };
        reader.onload = function(){
            k=reader.readAsText(file);

        };
       reader.readAsText(file);

    },onErrorLoadFs );
}

我要读取的对象格式:

function sub(name,absent,present){
    this.name=name;
    this.absent=absent;
    this.present=present;

}

var S = new sub('Physics',1,3);
var k= new sub();

我到底想做什么:

我在文件上写了一个对象S，打开时看起来像这样

{"name":"Physics","absent":1, "present" : 3}

现在，在读取文件(在我的例子中是 filetoAppend.txt)之后，我想将这些值分配给另一个对象 k，这样当我运行 k.name，Physics 显示为输出。

控制台输出

k
"{"name":"Physics","absent":1,"present":3}"
k.name
undefined

Answer 1

使用 Cordova 文件插件时，需要记住两条基本信息:

1. 与所有 Cordova 插件一样，您必须等待 deviceready尝试任何事情之前的事件，

2.然后，使用window.resolveLocalFileSystemURL(<path>, <successHandler>, <errorHandler>)

window.resolveLocalFileSystemURL()返回 FileEntry或 DirectoryEntry实例(取决于您是将文件还是目录作为路径作为其第一个参数)，然后您可以使用它。

写入文件

document.addEventListener('deviceready', onDeviceReady, false);  
function onDeviceReady() {  
    function writeToFile(fileName, data) {
        data = JSON.stringify(data, null, '\t');
        window.resolveLocalFileSystemURL(cordova.file.dataDirectory, function (directoryEntry) {
            directoryEntry.getFile(fileName, { create: true }, function (fileEntry) {
                fileEntry.createWriter(function (fileWriter) {
                    fileWriter.onwriteend = function (e) {
                        // for real-world usage, you might consider passing a success callback
                        console.log('Write of file "' + fileName + '"" completed.');
                    };

                    fileWriter.onerror = function (e) {
                        // you could hook this up with our global error handler, or pass in an error callback
                        console.log('Write failed: ' + e.toString());
                    };

                    var blob = new Blob([data], { type: 'text/plain' });
                    fileWriter.write(blob);
                }, errorHandler.bind(null, fileName));
            }, errorHandler.bind(null, fileName));
        }, errorHandler.bind(null, fileName));
    }

    writeToFile('example.json', { foo: 'bar' });
}

从文件写入

document.addEventListener('deviceready', onDeviceReady, false);  
function onDeviceReady() {  
    function readFromFile(fileName, cb) {
        var pathToFile = cordova.file.dataDirectory + fileName;
        window.resolveLocalFileSystemURL(pathToFile, function (fileEntry) {
            fileEntry.file(function (file) {
                var reader = new FileReader();

                reader.onloadend = function (e) {
                    cb(JSON.parse(this.result));
                };

                reader.readAsText(file);
            }, errorHandler.bind(null, fileName));
        }, errorHandler.bind(null, fileName));
    }

    var fileData;
    readFromFile('data.json', function (data) {
        fileData = data;
    });
}

cb是调用这个函数时需要传入的回调函数

完整引用使用:https://www.neontribe.co.uk/cordova-file-plugin-examples/

根据您更新的问题进行了更新

在 reader.onloadend 中，您可以获得文件的结果并分配给您的输出对象 k 或者可以调用回调函数 incase。

reader.onloadend = function (e) {
   //cb(JSON.parse(this.result));
   var k=JSON.parse(this.result);
   console.log(k.name + ", " + k.absent+ ", " + k.present);
  };

var k = JSON.parse('{"name":"Physics","absent":1, "present" : 3}');
console.log(k.name + ", " + k.absent + ", " + k.present);