Transmitting OfficeJS 2D Array via an Ajax Call

Struggling with sending a "large" table using OfficeJS:

functionfile.html loaded from manifest route

<script>
(function (){
"use strict";

Office.initialize = function (reason) {
    $(document).ready(function() {
        $("#send-data-button").click(send_data);
    });
};

function send_data() {
    return Excel.run( function(context) {
    var data = context.workbook.worksheets.getItem("SheetName")
                      .getRange("A1:K3673").load("values");

    return context.sync().then( function() {
        // 2d table is correctly seen
        // $("body").append(data.values);

        // Just gets lost in ajax call
        $.ajax({
           type: "GET",
           url: mysite,
           data: {"accessData": data.values},

         }).done( function(success) {
            $("body").append("All Done");

         }).fail( function(error) {
            $("body").append("Error == " + JSON.stringify(error));
         });

         return context.sync();
    });
    });
}
})();
</script>
<div> <button id="send-data-button"> Send </button></div>

Trying to send this data, but facing challenges. I have a Flask server handling the request on the backside and was hoping to use pandas.read_json. However, no matter how I attempt to send it, various errors occur. When evaluating flask.request with data.values[0][0], here's what I get:

CombinedMultiDict([ImmutableMultiDict([('update_date', '43191'), ('accessData', 'Channel')]), ImmutableMultiDict([])])

Furthermore, when evaluating data.values[0], I receive an expected list of values:

CombinedMultiDict([ImmutableMultiDict([('update_date', '43191'), ('accessData[]', 'Channel'), ... <All my column headers>, ImmutableMultiDict([])])

But attempting to send the 2D array with just data.values results in an error message within ajax.fail:

Error == {"readyState":0,"status":0,"statusText":"error"}

Similarly, trying JSON.stringify(data.values) yields the same error message:

Error == {"readyState":0,"status":0,"statusText":"error"}

I even attempted converting each column into some kind of nested keys list inside accessData, but encountered the same error message. Any assistance would be highly appreciated.

Answer №1

It's best practice to separate the process of retrieving data from Excel and making an ajax call. Currently, these two tasks are mixed together, complicating the debugging process and creating a less organized structure.

For fetching data from Excel, you can use the following code:


function getExcelData(){
    return Excel.run( function(context) {
        var data = context.workbook.worksheets.getItem("SheetName")
            .getRange("A1:K3673").load("values");
        return context.sync()
            .then(function() {
                return data.values;
            });
    })
}

This approach allows you to then proceed with:


    getExcelData().then(function(values) {
       $.ajax(...)
    });

Keep in mind that range.values simply returns a standard 2D array. This means you can test your ajax call independently from the Excel fetch (another reason to keep these processes separate)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Images copied using Gulp are often distorted or incomplete

There is a simple task of moving an image from one folder to another. gulp.task('default', function () { return gulp.src('./img/*.*') .pipe(gulp.dest('./image')); }); Previously, everything was running smoothly, b ...

Issue 500 encountered while implementing VB.NET with jQuery AJAX

Having trouble populating a select option using jQuery ajax, and I could really use some assistance! Encountering the following error: Failed to load resource: the server responded with a status of 500 (Internal Server Error) http://localhost:20440/admin ...

Discover the ins and outs of utilizing the Google+ Hangout API specifically for chatting purposes

I am currently working on a webpage and I want to include a hangout button that will allow users to connect with me and start chatting automatically when clicked. Here is the code I have so far: <script src="https://apis.google.com/js/platform.js" asy ...

How can I show or hide all child elements of a DOM node using JavaScript?

Assume I have a situation where the HTML below is present and I aim to dynamically conceal all the descendants of the 'overlay' div <div id="overlay" class="foo"> <h2 class="title">title</h2> ...

Determine the TR id when a button within a TD element is clicked using JavaScript/jQuery

Currently seeking a method to generate a unique identifier for use as a parameter in a JavaScript function. Specifically interested in extracting the id of the first td element if feasible. <tr id='it'><td id="#nameiron">Jason</td ...

Disappear notification with jQuery after a set amount of time

I stumbled upon this amazing script for displaying warning messages from this source: Within the script, it is configured to hide the warning message following a click event. $('.message').click(function(){ $(th ...

What causes the data to flicker between the old and new values when the state is updated in ReactJS?

Currently, I am developing a single-page application that fetches data from the Star Wars API. In the character section of the project, the goal is to display characters per page with the ability to navigate to the next or previous pages by clicking on but ...

Can you explain the mechanics behind Google Voice Search? And is there an available API for it?

Is this the right place to ask how the voice-activated search feature on Google's homepage functions? I'm curious about whether it utilizes Flash, a plugin integrated into Google Chrome, or some other method to access the microphone. The idea of ...

Insert a fresh item into the existing unordered list

Every time I enter something in the prompt, it shows up as "undefined". What I actually want is for whatever I type into the prompt to be added as a new list item. For instance, if I type "Food" in the prompt, I expect to see "Food" appear on the second li ...

The jQuery Ajax script fails to send data to the webservice function

Having trouble passing values from my ajax code to my webservice method. I believe I may be doing something wrong. Any guidance would be appreciated. This is the code in my .aspx file: $(function () { $.ajax({ type: "POS ...

Creating dynamic Fusion Charts with PHP and AJAX - a step-by-step guide

When a user selects a table name from a combobox, I need to generate a fusion chart on the same page. However, when I click on the value in the combobox, the output only shows "chart" and the actual chart is not displayed. Below is the code that I have at ...

React Server Component Warning: Server Functions cannot be invoked during the initial rendering stage

In my project, I have a client component named CampaignTable. This component requires a columns object to render the columns. Within the columns object, I include a server component called CampaignActions. The CampaignActions component is responsible for d ...

Developing a JSON structure from a series of lists

var data = [ [ "default_PROJECT", "Allow", "Connect", "Allow", "AddComment", "Allow", "Write", "Allow", "ViewComments", "Allow", "ExportData", "Allow", ...

Using three.js to add an image onto an already existing object

I attempted to modify the appearance of an object by adding an image, but all my tests resulted in a white object... The goal is simply to apply an image to the entire object. Here is my test code: var obj = scene.getObjectByName('wall_20_118') ...

Is there a way to store textbox values in a session on a JSP page without having to submit the form?

I have 5 textboxes and a button on my page. I want to add the values of these textboxes in my session without submitting a form. What could be the issue with my code? <head> <meta charset="UTF-8"> <title>$Title$</title> <script ...

Encountering the error message "This expression cannot be invoked" within a Typescript React Application

I'm working on separating the logic from the layout component in my Typescript React Application, but I suspect there's an issue with the return type of my controller function. I attempted to define a type to specify the return type, but TypeScr ...

Retrieving the ID of an AJAX request in Yii

When you program an ajax button similar to the following code snippet: echo CHtml::ajaxSubmitButton( 'Submit request', array('logInOfficeEmp/update&id='.$model->id), array( 'replace'=>'#req_ ...

Unique calculation for rotational movement

I am currently developing a unique compass application. Although the project is progressing well, I am facing a significant challenge with one aspect: My code calculates degree angles within the range of -360 and 360: -318°, -29°, 223°, -163°, ... ...

Azure-Graph is reporting an error: 'Invalid or missing Access Token.'

In my Node.js project, I effortlessly integrate azure APIs. Logging in: const MsRest = require('ms-rest-azure'); MsRest.loginWithServicePrincipalSecret(keys.appId, keys.pass, keys.tenantId); Creating a resource group: const { ResourceManageme ...

When the form is submitted, use jQuery to smoothly transition the page to a specific

I have a form and a div called "success". When the form is submitted, the "success" div is displayed. I am attempting to make it so that when the form is submitted, the page slides to the "success" div. Here is the code I am using: $.ajax({ type: "P ...