assigning json object to a global array

Question

I have already read the forum about this Topic but non of them addresses my problem. I have an Excel file read by XLSX. then I have the Array "objectArray" which is global array. The Json objects created by "Json.stringfy(row)" function is supposed to return a JSON object. Now I want to store these Objects in "objectArray" inorder to be visible for other functions in the file. However the global Array "objectArray" remains empty. How Should I get over it ? I tried to use Callback(objectArray). but the console says it is not a function !

Here is the HTML file

<!DOCTYPE html>
<html lang="en">
<head>

    <meta name="viewport" content="initial-scale=1.0, width=device-width" />
    <title>GemeSys</title>
    <link rel="stylesheet" href="./styles.css">
    <script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.3/xlsx.min.js"
        integrity="sha512-JiRzqZPYxjedpFqoYdKBcsKiBUfsmRZTyjuGlumbyJt4WJfWBZNqIizmbNgPN19VFtg3NYywvNk9lkt4KXVhiA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <style type="text/css">
        .directions li span.arrow {
            display: inline-block;
            min-width: 28px;
            min-height: 28px;
            background-position: 0px;
            background-image: url("https://heremaps.github.io/maps-api-for-javascript-examples/map-with-route-from-a-to-b/img/arrows.png");
            position: relative;
            top: 8px;
        }
    .directions li span.depart  {
        background-position:-28px;
      }
      .directions li span.rightturn  {
        background-position:-224px;
      }
      .directions li span.leftturn{
        background-position:-252px;
      }
      .directions li span.arrive  {
        background-position:-1288px;
      }
    </style>
</head>

<!-- ******************************************************************************************************-->
<body id="markers-on-the-map">
    <div class="controls">
         <form action="" id="form_1">
            <label for="File" > Choose File:  </label>
            <input type="file" accept=".xlsx, .xls, .csv" id="File_1" />
            <br>
            <br>
            <label for="Order-ID">Order-ID: </label>
            <input type="text" , id ="Order-ID">
            <button id="show_route" >  Show the Route</button>
            <Button id="show_all_routes">Show All Routes</Button>
           <Button id="Download"> Download Results</Button>
         </form>
    </div>
    <div id="map"></div>
    <div id="panel"></div>
    <script async src="preprocecing.js" defer="defer"></script>
</body>
</html>

and here is the Preprocesing.js file which contains the functions.



//const xlsxFile = require('read-excel-file/node');

var file_input = document.getElementById("File_1");
var Order_text = document.getElementById("Order_ID");
var Sroute1 = document.getElementById("show_route");
var SrouteAll = document.getElementById("show_all_routes");
var download = document.getElementById("Download");
var map = document.getElementById("map");
var panel = document.getElementById("panel");

let selectedFile;
const objectArray=[] ;


if (file_input) {
    file_input.addEventListener("change", function (event,objectArray) {
        selectedFile = event.target.files[0];
        if (selectedFile) {
            let filereader = new FileReader();
            filereader.readAsBinaryString(selectedFile);
            filereader.onload = (event) => {
                //console.log(event.target.result); 
                let data = event.target.result;
                let workbook = XLSX.read(data, { type: "binary" });
                //console.log(workbook);
                workbook.SheetNames.forEach(sheet => {
                    let rowObject = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheet]);
                    rowObject.forEach(row => { objectArray.push(JSON.stringify(row)); });
                    // callback(objectArray);
                });
            }
        }
    });
}

console.log(objectArray[1]);

and here is the Error in the Console

Uncaught TypeError: Cannot read properties of undefined (reading 'push')
    at preprocecing.js:30
    at Array.forEach (<anonymous>)
    at preprocecing.js:30
    at Array.forEach (<anonymous>)
    at FileReader.filereader.onload (preprocecing.js:28)

Thanks in advance.

Answer 1

Change handler callback has only one argument: event . You have 2.

file_input.addEventListener("change", function (event,objectArray)

JS takes objectArray from this place, not from where you define this ( const objectArray=[] ; ). That's why you are getting the error about reading properties of undefined. Try to remove this second argument.

assigning json object to a global array

Question

1 answers

solution1
0 2021-10-29 14:15:42

assigning json object to a global array

Question

1 answers

solution1 0 2021-10-29 14:15:42

solution1
0 2021-10-29 14:15:42