Passing a 2D array from one JavaScript function to another

Question

I trying to collect information from the user based on a 2D array. I have problems passing on the 2D array from one function in Javascript to another function, as an array and not as text. What could I be doing wrong?

The array is this

Title       Category1   Category2   Category3
Category1   Apples      Blue        Eyes
Category2   Oranges     Green       Legs
Category3   Pairs       Yellow      Arms
            Mango       Gray

The idea is to display Column1 first by having the "Title" as text and the Category list by buttons. On click of a button it should display the contents of the respected column. If, therefore, the user clicks on Category3, he should see Category3 as text and the options "Eyes", "Legs", "Arms" as buttons.

My problem is passing on the onclick the correct parameters as nextStep(this,database) is not working. When I pass on nextStep(this,\''+database+'\') of course it passes on the "database" as text and not as an array.

Any suggestions?

My HTML is a simple div.

      <div id="mainPage"></div>

My Javascript starts on load...

window.addEventListener("load", starting, false);

function starting(){
  var database = [[Title, Category1, Category2, Category3], [Category1,Apples,Blue,Eyes],[Category2,Oranges,Green,Legs],[Category3,Pairs,Yellow,Arms],[,Mango,Gray,]];
  renderCategories(database,1);
}

function renderCategories(database, pos){
  mainPage = document.getElementById("mainPage");

  var catTitles = database[0];
  var catTitle = catTitles[pos];
  var allmainPage = database[2];
  mainPage.innerHTML = '<div class="input-field col s12 m12"><h3>'+catTitle+'</h3></div>';

  for(var i=0; i<allmainPage.length; i++){
    var categoryListValue = allmainPage[i][pos];
    if (categoryListValue !=""){
      mainPage.innerHTML += '<div class="row"><button onclick="nextStep(this,database)" value="'+categoryListValue+'">'+categoryListValue+'</button></div>';
    }
  }
}

function nextStep(selection, database){
  var selectedCat = selection.value;
  alert(selectedCat);
  var catTitles = database[0];
  alert(catTitles);
}
window.addEventListener("load", starting, false);

suggestion: do not use obstrusive listeners directly on html like you are doing with onclick="...", you have much more control over the element and its listener if you create the element (elem = document.createElement('div')) and then assign the listener with JS, like: elem.onclick = ... — Calvin Nunes
– Calvin Nunes, Commented Feb 11, 2020 at 16:23
allmainPage is one dimensional, you are treating it as if it had two dimensions — sinanspd
– sinanspd, Commented Feb 11, 2020 at 16:28

CH4B · Accepted Answer · 2020-02-12 12:16:48Z

1

I suggest you pass the database using the JSON.stringify() function, and then you can convert it back using the JSON.parse(), like this:

for(var i=0; i<allmainPage.length; i++){
    let categoryListValue = allmainPage[i][pos],
        databaseString = JSON.stringify(database);

    if (categoryListValue !="")
       mainPage.innerHTML += '<div class="row"><button onclick="nextStep(this,' + databaseString + ')" value="'+categoryListValue+'">'+categoryListValue+'</button></div>';
  }

And then:

function nextStep(databaseString) {
    let database = JSON.parse(databaseString)
}

Although I don't think this is the best way of doing it, it should fix your problem.

If you want my opinion, I think you should store the database in your localstorage and acess it using 'keys' as parameters (like database01) and such.

edited Feb 12, 2020 at 12:16

answered Feb 11, 2020 at 16:26

CH4B

7841 gold badge11 silver badges32 bronze badges

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

3 Comments

senedot Over a year ago

Thank you for the note. You are right, I should change the whole thing to do all calculations locally.

CH4B Over a year ago

@senedot if you could please accept the answer, I'd be very happy ^^ (Just click the 'check' icon below the updoot/downdoot button)

senedot Over a year ago

Sorry, I am still trying to find my way round here. Thanks for the note and your feedback I really appreciate it.

Collectives™ on Stack Overflow

Passing a 2D array from one JavaScript function to another

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related