javascript - 将 Excel 工作表转换为 JSON 并将数据发送到 SharePoint 列表——改为获取空对象

Question

我正在开发一个项目，该项目应该获取上传的 Excel 文件，将其转换为 JSON，然后将解析信息的 POST 到 SharePoint 列表中。 POST 请求正在运行 --- 当我重新加载 SharePoint 列表时，上传的项目就在那里，但返回时为空白。

长话短说，应该解析的数据显示为一个空对象。

我还注意到，在 Excel 解析函数中，大部分代码都被跳过，我不知道为什么。在下面的代码中，我列出了它发生的位置。

我需要将哪些参数传递给 xl2String(见下文)？

<小时/>

HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script lang="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.15.5/xlsx.full.min.js"></script>

<input class="getFile" id="getFile" type="file" name="files[]" multiple="multiple"/><br />

<小时/>

JS:

<script>
    const ExcelToJSON = function(files) {

        this.parseExcel = function(files) {
            let reader = new FileReader();

            reader.onload = function(e) { 
                let data = e.target.result; // this code is NOT reached
                    console.log("data: ", data)
                let workbook = XLSX.read(data, { type: 'binary' });

                workbook.SheetNames.forEach((sheetName) => {
                    let XL_row_object = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName]);
                    let json_object = JSON.stringify(XL_row_object);

                    console.log(JSON.parse(json_object))

                    $('#jsonData').val(json_object);
                })

            } // reader.onload // debugger skips over

            reader.onerror = function(err) {
                console.log(err);
            }

            // reader.readAsBinaryString(files); // tells JS to start reading the file
        } // this.parseExcel

    } // ExcelToJSON

    function handleFileSelect(evt) {
        let files = evt.target.files; // FileList object

            let xl2json = new ExcelToJSON(files);
                    xl2json.parseExcel(files[0]);
                    let xl2String = JSON.stringify(xl2json);

            let addlistItem = new AddItemToSPList();
                AddItemToSPList(xl2String[0].Title, xl2String[0].Location);
                console.log(xl2String) // empty obj...

//      let filteredByLocation = xl2json.map(e => e.Location == "New York");

        console.log(xl2String.Title); // empty obj

    }

    const AddItemToSPList = function(title, location) {
        let holidaysColumns = {
            "__metadata":{"type": "SP.Data.holidaysListItem"},
      "Title": title,
            "Location": location
        };

        let listName = "Test%20Holidays";
        return fetch("www.url.com/gc/_api/web/lists/getbytitle('" + listName + "')/items", {
            method: "POST",
            credentials: 'same-origin',
            body: JSON.stringify(holidaysColumns),
            headers: { 
                // etc            
            }
        }).then((response) => {
            $(".uploadSuccessFail").html("File was upload successfully.")
            console.log(response)
        }).catch((err) => {
            $(".uploadSuccessFail").html("Error: File upload unsuccessful.")
            console.log("Error: " + err);
        })
    }

</script>


<script>
    document.getElementById('getFile').addEventListener('change', handleFileSelect, false);
</script>

Answer 1

我对您使用的语法有点困惑，您已将 ExcelToJSON 定义为对象构造函数，但它只包含一个方法，甚至不使用传递给的参数构造函数或方法。 onLoad 永远不会被执行，因为 reader.readAsBinaryString 被注释掉，这是触发文件加载的方法。您正在尝试从 parseExcel 捕获 xl2json 但该文件是异步解析的，因此您需要在 onLoad 中使用 json 并保存您的从该回调中将项目发送到 SharePoint。然后，您将 AddItemToSPList 视为构造函数，但它只是一个函数，因此可能不会执行任何操作。

我没有您的 XLSX 实用程序，因此我无法执行代码，但这应该可以工作:

<script>
    function parseAndUploadFile(file) {
        let reader = new FileReader();

        reader.onload = function(e) { 
            let data = e.target.result; // this code is NOT reached
                console.log("data: ", data)
            let workbook = XLSX.read(data, { type: 'binary' });

            workbook.SheetNames.forEach((sheetName) => {
                let XL_row_object = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName]);
                let json_object = JSON.stringify(XL_row_object);

                //console.log(JSON.parse(json_object))

                //$('#jsonData').val(json_object);

                if (XL_row_object && XL_row_object.Title && XL_row_object.Location) {
                    addItemToSPList(XL_row_object.Title, XL_row_object.Location);
                } else {
                    console.log('parsed json does not appear to have necessary values: ')
                    console.log(XL_row_object);
                }
            })

        } // reader.onload

        reader.onerror = function(err) {
            console.log(err);
        }

        reader.readAsBinaryString(files); // tells JS to start reading the file
    } // ExcelToJSON

    function addItemToSPList(title, location) {
        let holidaysColumns = {
            "__metadata":{"type": "SP.Data.holidaysListItem"},
            "Title": title,
            "Location": location
        };

        let listName = "Test%20Holidays";
        return fetch("www.url.com/gc/_api/web/lists/getbytitle('" + listName + "')/items", {
            method: "POST",
            credentials: 'same-origin',
            body: JSON.stringify(holidaysColumns),
            headers: { 
                // etc            
            }
        }).then((response) => {
            $(".uploadSuccessFail").html("File was upload successfully.")
            console.log(response)
        }).catch((err) => {
            $(".uploadSuccessFail").html("Error: File upload unsuccessful.")
            console.log("Error: " + err);
        })
    }

    function handleFileSelect(evt) {
        let files = evt.target.files; // FileList object

        if (files.length > 0) {
            parseAndUploadFile(files[0]);
        }
    }
</script>


<script>
    document.getElementById('getFile').addEventListener('change', handleFileSelect, false);
</script>