Unable to access array content of first JavaScript file in second javascript file

Question

I have used arrays 'ParticularsArr' and 'AmountArr' to fill data in the table in my first js file (script.js).

var row = 1;
var ParticularsArr = new Array;
var AmountArr = new Array;
var ParticularsAmountArrIndex = 0;
var ParticularsDel;

$(document).ready(function() { 
    makeNull();
    //-----------------------code for initializing add button------------------------------------------
    $("#add").click(function() {
        rowAdder();
        makeNull();
    });

    //-------------------------Code for adding row--------------------------------------------
    function rowAdder() {
        ParticularsArr[ParticularsAmountArrIndex] = document.getElementById("particulars").value;
        AmountArr[ParticularsAmountArrIndex] = document.getElementById("amount").value;

        if (!ParticularsArr || !AmountArr) {
            alert("Please enter the values inside all the field.");
            return;
        }

        var display = document.getElementById("table-1");
        var newRow = display.insertRow(row);    
        var cel1 = newRow.insertCell(0);
        var cel2 = newRow.insertCell(1);
        var cel3 = newRow.insertCell(2);

        var StringEntity = "<button id='remove'>X</button>";

        cel1.innerHTML = ParticularsArr[ParticularsAmountArrIndex];
        cel2.innerHTML = AmountArr[ParticularsAmountArrIndex];
        cel3.innerHTML = StringEntity;             //"<button id='remove'>X</button>";
    
        row++;
        
        ParticularsAmountArrIndex++;
    }

    //------------------Code to put null values in the input -----------------------------
    function makeNull() {
        document.getElementById("particulars").value = "";
        document.getElementById("amount").value = "";
    }

    //--------------------------Code for 'X'(delete) button-------------------------------
    $(document).on('click', '#remove', function() { 
        $(this).parents('tr').remove();
        row--;
    });

    $("#preview").click(function() { 
        window.open("preview.html","_blank");

    });
});

This is a second JavaScript file (script-preview.js), I want to retrieve the array and show the table of content which I stored in the array, on another HTML page, but I am not able to get contents inside the array, it shows undefined.

var row_2 = 1;

$(document).ready(function() {

    for(var i=0; i<=ParticularsArr.length; i++) {
        var dis## Heading ##play = document.getElementById("table_1");
        var newRow = display.insertRow(row_2);    
        var cel1 = newRow.insertCell(0);
        var cel2 = newRow.insertCell(1);

        cel1.innerHTML = ParticularsArr[i];
        cel2.innerHTML = AmountArr[i];
    
        row_2++;
    }

});

First HTML file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA_Commpatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profit and Loss Statement</title>
    <link rel="stylesheet" href="css/bootstrap-reboot.min.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/styles.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
        integrity=""sha384-ZvpUoO/+PpLXR1lu4jmpXWu80pZlYUAfxl5NsBMWOEPSjUn/6Z/hRTt8+pR6L4N2" 
        crossorigin="anonymous""></script>
    <link href="https://code.jquery.com/ui/1.10.4/jquery-ui.js">

</head>
<body>    
    <div id="adder">
        <p id="heading-1">Profit Statement</p>
        <table id="adderhd">
            <tr>
                <th>PARTICULARS</th>
                <th>AMOUNT</th>
            </tr>
            <tr>
                <th><input type="text" id="particulars" value=""></th>
                <th><input type="number" id="amount" value=""><button id="add">Add</button></th>
                <div id="previewbtn"><button id="preview">Preview Data</button></div>
            </tr>
        </table> 
    </div>

    <div id="tables">
        <div>
            <table id="table-1">
                <tr>
                    <th>PARTICULARS</th>
                    <th>AMOUNT</th>
                </tr>
            </table>
        </div>
    </div>    

    <!-- JQuery (Bootstrap JS plugins depend on it) -->
    <script src="js/jQuery-3.5.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/ajax-utils.js"></script>
    <script src="js/script.js"></script>
</body>
</html>

Second HTML file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA_Commpatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profit and Loss Statement preview</title>
    <link rel="stylesheet" href="css/bootstrap-reboot.min.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/style-Preview.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
        integrity=""sha384-ZvpUoO/+PpLXR1lu4jmpXWu80pZlYUAfxl5NsBMWOEPSjUn/6Z/hRTt8+pR6L4N2" 
        crossorigin="anonymous""></script>
    <link href="https://code.jquery.com/ui/1.10.4/jquery-ui.js">

</head>
<body>    
    <div id="profit-border">    
        <div id="adder">
            <p id="heading_1">Profit Statement</p>
        </div>
        
        <div id="table-outline">
            <div>
                <table id="table_1">
                    <tr>
                        <th>PARTICULARS</th>
                        <th>AMOUNT</th>
                    </tr>
                </table>
            </div>
        </div>
    </div>

    <!-- JQuery (Bootstrap JS plugins depend on it) -->
    <script src="js/jQuery-3.5.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/ajax-utils.js"></script>
    <script src="js/script.js"></script>
    <script src="js/script-preview.js"></script>
</body>
</html>

Every HTML page has its own JavaScript variables, they don't transfer. — Barmar
– Barmar, Commented Jul 21, 2020 at 8:25
If you want to transfer data between pages, use localStorage or sessionStorage. — Barmar
– Barmar, Commented Jul 21, 2020 at 8:25
There are 2 problems that I see, 1st: the 2nd function might execute before the target array is actually populated, 2nd: they must both be executed on a single web page, because JS is not persisted when you traverse the website. If you need persistence on the client side, you could use 'localStorage'. — Borna
– Borna, Commented Jul 21, 2020 at 8:27
** @Teemu and Barmer ** I have two HTML file where the first JavaScript code mentioned above is associated with first HTML file and the second code associated with second, on first page there is a table where entries are added and stored in array I want to access those contents of array on my second JavaScript file. So I have written code in second file to retrieve the data from array which is located in first JavaScript file but I am not able to get contents of array it is giving me error as undefined array. — Siddhesh
– Siddhesh, Commented Jul 21, 2020 at 8:30
If you want that the array is persisted even after closing the browser, use localStorage, otherwise use sessionStorage. — Borna
– Borna, Commented Jul 21, 2020 at 8:36

Borna · Accepted Answer · 2020-07-21 08:43:07Z

1

If you want that the array is persisted on the client (browser) even after closing the browser, use localStorage, otherwise use sessionStorage.

Both storages requires the set values to be string, so you can use JSON.stringify and JSON.parse.

page 1: (save)

sessionStorage.setItem('myParticularsArr', JSON.stringify(ParticularsArr));

page 2: (retrieve)

var ParticularsArr = JSON.parse(sessionStorage.getItem('myParticularsArr'));

edited Jul 21, 2020 at 8:43

answered Jul 21, 2020 at 8:35

Borna

1,1992 gold badges12 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Siddhesh Over a year ago

This is working but only for string entity, amount column is still getting empty, what should I use for integers?

Siddhesh Over a year ago

do you know anything which will work in same manner for integers.

Teemu Over a year ago

@Siddhesh This will work for almost every data type except functions.

Siddhesh Over a year ago

Yes, it is working for Integer too. Thanks for the help @boy and @Temmu

Collectives™ on Stack Overflow

Unable to access array content of first JavaScript file in second javascript file

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related