Problem with accessing an array in javascript

Question

Problem with accessing an array in javascript

121 Views Asked by calp At 23 November 2023 at 19:39

I want to build a web-remote for the DAW Reaper, using Reapers WebRC.

How it works in basic you can read about here:

In my case I want to access the markers set in Reaper.

The minimum example of the code I use you find here:

<!doctype html>
<html>
<head>

<script src="main.js"></script>
<script type="text/javascript">
function wwr_onreply(results) {
  var ar = results.split("\n");

  for (var i = 0; i < ar.length; i++) {
    var tok = ar[i].split("\t");
    if (tok.length > 0)
      switch (tok[0]) {
        case "MARKER":
          document.getElementById("marker").innerHTML = tok;
          break;
      }
  }
}

wwr_req_recur("MARKER", 1000);
wwr_start();
</script>
</head>

<body>

<p>tok of "MARKER": <div id="marker"></div></p>

</body>

</html>

So Reaper passes the queried in a single line of text. Each parameter (e.g. "TRANSPORT", "TRACKS", "MARKERS", etc.) is divided by "\n". If a parameter contains multiple parameters (like different markers), they are divided by "\t".

Now the results get split by "\n" and stored in the array "ar". After that, if containing multiples, they get split by "\t" and stored in the array "tok".

My problem: I can only access the last marker in the "tok". The tok.length is always '5' (Marker, Marker name, id, position, color), no matter how many markers are in the project. When I use "alert(tok.length);", the message windows opens and by clicking ok I can step through all the markers.

Can anyone help me, how I can access the other entries in "tok"?

I tried like with nested array (tok[2][3];), but it didn't help...

I tried to display "tok" with document.getElementById("element").innerHTML = tok and document.getElementById("element").innerHTML = tok[x][y]

I tried to display via "alert(tok)"

Original Q&A

There are 2 best solutions below

**muka.gergely** · Answer 1 · 2023-11-23T20:32:47.503000

I would suggest breaking down your process to smaller steps, and solving one at a time.

This could be a step-by-step guide of your algorithm:

Split array by \n => returns an array of strings (arr1)
Split every item in arr1 by \t => returns an array of arrays (arr2)
Filter out items that have MARKERS as their first item => returns an array of arrays (arr3)

In arr2 and arr3 you can access individual items by arr2[x][y] (or arr3[x][y].

Create the string that needs to be displayed in the DOM element

This is a snippet that does something like this:

const dataString = "TRACKS\t2\t3\t4\t5\nMARKER\t7\t8\t9\t10\nTRACKS\t12\t13\t14\t15\nMARKER\t17\t18\t19\t20"

const tokDiv = document.getElementById("tok")

// utility functions to split the string by different delimiter
const splitBy = (delimiter) => (s) => s.split(delimiter)
const splitByT = splitBy("\t")
const splitByN = splitBy("\n")

// parser function to split the data string first by \n,
// then every line by \t
const parseDataString = (s) => splitByN(s).map(splitByT)

// filter function to only have arrays whose first element (head)
// is MARKER
const getMarkers = (arr) => arr.filter(([head]) => head === "MARKER")

// utility functions to join the arrays by different delimiters
const joinBy = (delimiter) => (arr) => arr.join(delimiter)
const joinBySemiCol = joinBy(";")
const joinByBr = joinBy("<br />")

// function to concatenate array of arrays with delimiters
const writeDataRows = (arr) => joinByBr(arr.map(joinBySemiCol))

// constructing the string that is displayed:
// 1. Parsing the data string (parseDataString); returns array of arrays
// 2. Filtering the rows (getMarkers); returns filtered array of arrays
// 3. Joining array of arrays (writeDataRows); returns a string
const rows = writeDataRows(getMarkers(parseDataString(dataString)))

// outputting the parsed, filterd, concatenated string
tokDiv.innerHTML = rows

<div id="tok"></div>

This might feel unnecessarily verbose compared to your try, but it's much easier to debug, if something is not how you imagined it.

Hope this example helps.

**calp** · Answer 2 · 2023-11-29T08:13:31.647000

calp On 29 November 2023 at 08:13

In fact the problem was I put the code in loop.

The solution was to put something like variable.push(tok) in the CASE: "MARKER section and then accesss this variable later somewhere after the loop.

Problem with accessing an array in javascript

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in ARRAYS

Related Questions in REAPER

Trending Questions

Popular # Hahtags

Popular Questions