Can arrays be passed as function parameters in CrossRider without the need to convert them into objects first?

Our team is currently utilizing CrossRider to develop an extension specifically for Internet Explorer. We have a crucial object that is downloaded from , but we are facing an issue where arrays within this object are getting converted into objects with integer keys when sent to a callback function. This unexpected conversion raises the question of why arrays are being transformed into objects, and more importantly, if there's a way to prevent this during the process. While one solution would involve using JSON.stringify and JSON.parse within the calling function, we're curious if there's a direct method to send arrays without them being altered. Even a simple array like ['a','b','c'] ends up as an object ({"0":"a","1":"b","2":"c"}) once it reaches the function.

This functionality is being developed for Internet Explorer 11, but ultimately should be compatible with all versions of the browser.

Edit (1): After conducting tests in both Internet Explorer 11 and Google Chrome, our findings showed discrepancies between the browsers. Specifically, a new extension with ID 67708 worked flawlessly in Chrome but faced issues in Explorer. A snippet of the code showcases these differences:

background.js:

/************************************************************************************
This section contains background-specific code.
Refer to our wiki site for detailed information:
http://docs.crossrider.com/#!/guide/scopes_background
*************************************************************************************/

function callme1() {
    var r1 = ['a','b','c'];
    alert('r1 = ' + JSON.stringify(r1));
    return r1;
}

appAPI.ready(function($) {

 // Your custom code goes here (ideal for managing browser buttons, global timers, etc.)
 alert('callme1() = ' + JSON.stringify(callme1()));

});

extension.js:

/************************************************************************************
This section pertains to Page Code. The appAPI.ready() block will run on every page load.
Consult our docs at: http://docs.crossrider.com
*************************************************************************************/

function callme2() {
    var r2 = ['a','b','c'];
    alert('r2 = ' + JSON.stringify(r2));
    return r2;
}

appAPI.ready(function($) {

 // Place your code here (you can define additional functions above)
 // The $ object refers to the extension's jQuery object

 // For instance: alert("My new Crossrider extension works! Current page: " + document.location.href);
 alert('callme2() = ' + JSON.stringify(callme2()));

});

While alerts in Chrome present valid arrays like ["a","b","c"], those in Explorer show objects like {"0":"a","1":"b","2":"c"}, both before and after returning the object. Despite attempts to rectify this by employing JSON.stringify followed by JSON.parse, the issue persists within our extension (ID 43889). Interestingly, executing JSON.stringify(['a','b','c']) in either browser yields the expected outcome - "["a","b","c"]".

An additional concern emerged regarding CrossRider inadvertently converting staging extensions to production status, necessitating manual reversion to staging mode multiple times with both extensions.

Edit (2): Seeking alternative solutions, we experimented with replacing JSON.stringify with appAPI.JSON.stringify. As a result, Explorer now displays the correct results within extension.js (["a","b","c"]). However, an unforeseen setback arose where background.js failed to load altogether in debug mode, persisting with outdated content even upon selecting "reload background code." It remains unclear whether this anomaly stems from running two extensions simultaneously in debug mode or if it represents a peculiar bug unique to our scenario.

Answer №1

I encountered a similar issue while working with the messaging API. I'm not sure if your problem is related to saving data to a database?

From what I recall during my debugging process, it seems that Crossrider API internally serializes values to JSON for communication purposes. They seem to use a faulty JSON implementation instead of the native JSON object, especially in their background IE process where passing objects via postMessage is not natively supported (e.g., IE8). This results in receiving broken arrays even when using appAPI.JSON.

To resolve this issue, I opted to utilize an external JSON library such as JSON3. http://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js While it may impact performance slightly, it should work fine for smaller objects.

An alternative approach would be to patch the Crossrider API's JSON method with the external library, which could potentially fix the issue.

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

The issue arises in RAD Server Delphi when attempting to use savetostream and loadfromstream due to distorted vowels following Json conversion, causing the functionality

I am attempting to transfer data between a RadServer IIS Package and Delphi Client using EMSEndpoint. The process seems straightforward, but I am encountering difficulties in achieving it. Within the package, there is a TFDConnection that points to an MSS ...

What is the best way to save numerous records using the saveRecord function in nlapi methods?

After customizing the default promotion form, I implemented a feature where clicking on a specific promotion triggers dynamic elements to be displayed using jQuery. Since the fields or records for this requirement haven't been created yet, multiple re ...

Searching Firebase by using comparison operators on various fields

const FindFiis = async () => { const data: any[] = []; // Firebase query with inequalities on different fields to retrieve docs. // Objective: Select documents where dividendYield is between 8 and 20 and pvp is less than or equal to 1. ...

The Controller received a JSON object that was empty

I know this question has been asked countless times, but I've tried all solutions with no success. Here's the JSON object in question: { "manufacture":"HP", "model":"testModel", "serialNumber":"testSerial", "description":"Test Descript ...

Error 56 EROFS encountered when trying to save a file in Node.js filesystem every 2 seconds

I've set up a node.js environment on my raspbian system and I'm attempting to save/update a file every 2/3 seconds using the code below: var saveFileSaving = false; function loop() { mainLoop = setTimeout(function() { // update data ...

What is the proper way to incorporate the "pdf" package into a TypeScript project?

I recently installed pdf and its types using the following command: npm install --save pdf @types/pdf However, I am struggling to find any documentation on how to actually use this package. When I try the following code: import {PDFJS} from 'pdf&ap ...

Leveraging a combination of AngularJS directives within a single div element

Why can't I use multiple directives in the same div tag in AngularJS? The product names from the module are not displayed with the following HTML code: <!DOCTYPE html> <html ng-app="gemStore"> <head> <title></ti ...

What is the best way to substitute </br> and <br/> with in a text?

Is there a way to replace </br> and <br/> with \n functionally? There seems to be varied responses to this query. Errors are often made when writing the break tag. The solutions for both types of breaks mentioned above are detailed below ...

When a User registers, they are successfully added to the database. However, upon inspection in the browser, the JWT token appears as "undefined."

My goal is to successfully register a user and then ensure that a token persists in the browser. Currently, the user gets registered and added to the database but I am facing some issues. When inspecting, I notice that there is no token (token: "undefined" ...

What is the best way to access nested callback results from another file in a Node.js environment?

My API code can be found in the file api.js This is the content of api.js: var express = require('express'); var Vimeo = require('vimeo').Vimeo; var lib = new Vimeo('dfdfdfdfdfdfd', 'WDIt+kEVudfghjklkjhgfdfghjkjhgfMaG9X ...

I recently started delving into React Native and am currently exploring how to implement custom fonts in my application. However, I have encountered an error that is preventing me from successfully integrating

The Issue: The error I encountered only appeared after including font-related code (such as importing from "expo-font" and using "AppLoading" from "expo", and utilizing the "Font.loadAsync()" function). Error: Element type is invalid: expected a string (fo ...

The server appears to be up and running, however there seems to be an issue when attempting to access the API as it is returning an Error: connect ECONNREFUSED 127.0.0.1

Trying to decouple app and server. Successfully running, but encountering Error: connect ECONNREFUSED 127.0.0.1:3000 in Postman when hitting "app.get('/')" API despite making necessary changes. In ./routes/users.js const express = requ ...

Having trouble with sending a list of items from a VueJS form

I have a VueJS application that calls a patch method to update a user's profile. For example, I am attempting to update the field cities. I created a serializer and views.py using Postman during development. I used Postman to call the patch method fo ...

Storing the value from the INPUT field in the state of React is not permitted

I'm attempting to retrieve the user input value from the INPUT field and update it in the corresponding state. However, no matter what I type in the field, it doesn't get set to the state. createForm(x){ var dx = 'd'+x let da ...

I'm looking to use JavaScript to dynamically generate multiple tabs based on the selected option in a dropdown menu

I'm reaching out with this question because my search for a clear answer or method has come up empty. Here's what I need help with: I've set up a dropdown titled 'Number of Chassis'. Depending on the selection made in this dropdown ...

How to utilize JavaScript to convert a string into a function name

In this specific scenario, I am required to trigger a function based on the data attributes associated with an HTML element. function func1(arg1){ alert("func1"); } function func2(arg2){ alert("func2"); } jQuery(document).on('click', & ...

Raycasting intersection with a line on BufferGeometry in Three.js

After successfully implementing raycasting on lines with R59 and displaying tooltips on mouseover, I encountered performance issues due to increasing data. This led me to switch from using THREE.Geometry to THREE.BufferGeometry. While everything else seems ...

Loading Ajax content on a webpage

Recently, I've been impressed with the layout of Google Play Store on a web browser. I am eager to replicate that same smooth browsing experience on my own website. Specifically, I want to create a feature where selecting a category or item doesn&ap ...

Pull the data from jQuery/JavaScript/AJAX and store it in the database using ASP.NET/C#

I am working on creating a form that includes textboxes and a five star rating feature. The goal is to save the data entered in the fields into a database upon submitting. While implementing the textboxes was straightforward, I am facing challenges with e ...

Retrieving server information using AJAX in React

I've been attempting to utilize an AJAX call in order to fetch server data for my React Components. However, I'm encountering difficulties when it comes to displaying it with React as I keep receiving this error: Uncaught TypeError: Cannot read ...