Sending a JavaScript array to a different webpage

Question

Sending a JavaScript array to a different webpage

Is there a way to pass an array and its contents to another page for use?

I am utilizing an array to store coordinates for drawing a polyline on a Google map. The array works correctly on one page, but when attempting to call the array to draw the polyline points on a different map, it seems that the array is empty and no polyline points are drawn.

I tried using localStorage with JSON stringify, but faced several issues where Google Maps wouldn't accept the values because they contained unexpected values or were in an unrecognized format.

var googleLatLng = [],
    latlngs = [];

function storeLatLng( lat, lng ) {
    googleLatLng.push(new google.maps.LatLng(lat, lng));
    latlngs.push([lat, lng]);

        // setcoords = JSON.stringify(googleLatLng);
        // localStorage.setItem('GoogleLatLng', setcoords);

        // console.log(localStorage.getItem("GoogleLatLng"));

        console.log(googleLatLng);
}

This code constructs the array from the provided coordinates, and the function is invoked within onSuccess of the watchPosition function as follows:

storeLatLng(lat, lon);

Subsequently, I aim to utilize the array values within the following function:

function finishedWalk() {
        // storedCoords = localStorage.getItem('GoogleLatLng');
        // if(storedCoords) storedCoords = JSON.parse(storedCoords);
        navigator.geolocation.getCurrentPosition(onFinishedSuccess, onFinishedError);
}

    function onFinishedSuccess(position) {

    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
    coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

    storeLatLng(latitude, longitude);

        var mapOptions = {
            zoom: 17,
            center: coords,
            mapTypeControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        //create the map, and place it in the HTML map div
        map = new google.maps.Map(document.getElementById("mapPlaceholder"), mapOptions);

        if (googleLatLng.length > 0) {
          var path = new google.maps.Polyline({
            path: googleLatLng,
            strokeColor: "#FF0000",
            strokeOpacity: 1.0,
            strokeWeight: 5
          });
          path.setMap(map);
        }
}

This function is called onLoad of another page.

javascript arrays google-maps cordova

Answer 1

Answer №1

Utilizing Session Storage or Local Storage to Pass Data: (simple example)

Data transfer between pages can be achieved using session storage. Another option is local storage, which operates in a similar manner but persists even after the session is closed.

To use local storage instead of session storage, simply replace sessionStorage with localStorage.

Array for Storage:

var testArray = ['test'];

Storing the Array:

$('#store').on('click', function(){
    sessionStorage.setItem('myArray', testArray);
});

Retrieving the Array:

$('#get').on('click', function(){
    var myArray = sessionStorage.getItem('myArray');
    alert(myArray);
});

Clearing Session Storage:

$('#clear').on('click', function(){
    sessionStorage.clear();
});

HTML:

<a href="javascript:void(0);" id="store">Store Array</a>
<a href="javascript:void(0);" id="get">Get Array</a>
<a href="javascript:void(0);" id="clear">Clear</a>

Verifying Stored Sessions in Chrome:

If storing data as strings, remember to convert it back to JSON format:

var mydata = localStorage.getItem("GoogleLatLng");
var myObject = JSON.parse(mydata);

DEMO:

http://jsfiddle.net/mdktpmw2/

Compatibility with Older Versions of Internet Explorer:

https://github.com/pamelafox/lscache

Additional Resources:

Answer 2

Utilizing Session Storage or Local Storage to Pass Data: (simple example)

Data transfer between pages can be achieved using session storage. Another option is local storage, which operates in a similar manner but persists even after the session is closed.

To use local storage instead of session storage, simply replace sessionStorage with localStorage.

Array for Storage:

var testArray = ['test'];

Storing the Array:

$('#store').on('click', function(){
    sessionStorage.setItem('myArray', testArray);
});

Retrieving the Array:

$('#get').on('click', function(){
    var myArray = sessionStorage.getItem('myArray');
    alert(myArray);
});

Clearing Session Storage:

$('#clear').on('click', function(){
    sessionStorage.clear();
});

HTML:

<a href="javascript:void(0);" id="store">Store Array</a>
<a href="javascript:void(0);" id="get">Get Array</a>
<a href="javascript:void(0);" id="clear">Clear</a>

Verifying Stored Sessions in Chrome:

If storing data as strings, remember to convert it back to JSON format:

var mydata = localStorage.getItem("GoogleLatLng");
var myObject = JSON.parse(mydata);

DEMO:

http://jsfiddle.net/mdktpmw2/

Compatibility with Older Versions of Internet Explorer:

https://github.com/pamelafox/lscache

Additional Resources:

Answer 3

Answer №2

If you're looking to transfer data to another page, there are plenty of helpful resources available to guide you through the process. You can check out tutorials or refer to previous Stack Overflow answers that address similar queries:

how can i send the data to another page without appending it in url?

passing form data to another HTML page

To efficiently handle the transferred data, consider fetching it within the onLoad event of the subsequent page.

Answer 4

If you're looking to transfer data to another page, there are plenty of helpful resources available to guide you through the process. You can check out tutorials or refer to previous Stack Overflow answers that address similar queries:

how can i send the data to another page without appending it in url?

passing form data to another HTML page

To efficiently handle the transferred data, consider fetching it within the onLoad event of the subsequent page.

Sending a JavaScript array to a different webpage

Answer №1

Answer №2

Similar questions

Top recommendation for showcasing a numerical figure with precision to two decimal points

Retain the contents of the shopping cart even when the page is refreshed

Utilizing React JS to dynamically adjust the z-index upon clicking a component

Trigger JavaScript when a specific division is loaded within a Rails 4 application

Facing a few hiccups in JavaScript or CSS code, but getting closer to making it work

Is it possible for the req.url path in expressjs to represent a different URL?

Fulfill a pledge after a function has been run five times

Mastering JavaScript closures and scope management: Techniques for successfully passing an external scope variable into a callback function as an argument

Set all form fields to ng-touched programmatically when the form is submitted

When using the jQuery ajax function to validate a form, it is important to note that the $_POST variables

What is causing this JavaScript code to function properly in the browser console but fail in Selenium's JavascriptExecutor?

The jquery function is not functioning properly within a javascript code block, however it performs perfectly when placed outside

Steps for concealing a specific field in StrongLoop's outcome

Creating a customized bundle with Bootstrap using the Rollup tool

Retrieve parameters from functions and convert them into coherent statements

Retrieving the chosen value when there is a change in the select tag

Utilize JavaScript and regular expressions to extract the query string

How about using take(1) in conjunction with an Observable<boolean>?

The design of Foundation's 4 form dropdown is not displaying correctly on Internet Explorer versions 8 and below

When executing my code to delete a file and remove it from the database, an error message pops up in the console