How can I put an array(that is in php) into the table(js)

Question

So I'm trying to get array that's in php into a table that is in js. The php is connected to a server and I put it into an array. The array is:

array(
[0] =>Array([file] => 292929)
[1] =>Array([file] => 1321323)
[2] =>Array([file] => 1232312)
)

So I'm trying to get the numbers above into a table in js.

<script>


var counter = 0;
var max = //gets the total number in array

<?php

$numc = 0

?>
while(parseInt(max) > counter)
{

  var table = document.getElementById("myTable");//Table
  var row = table.insertRow(1);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);

  //Variables in cells
  cell1.innerHTML = "Name";
  cell2.innerHTML = '<?php  echo "{$rows[$numc]['file']}";  ?>';

  counter = counter + 1;
  <?php

  $numc = 1 + $numc;

  ?>
}

</script>

What I expect is similar to this table:

Name  292929
Name  1321323
Name  1232312

except I get

Name  292929
Name  292929
Name  292929

I know this is a scope? issue for php, but I cannot get all the php values into the table.

Answer 1

first you render code with $rows[$numc]['file'] only once - js while cycle isn't reachable in php

you can:

1. render full array inside js:

<?php
echo 'const numArray = [' . implode(', ', $rows) . '];';
?>

and use it inside js as it is js array in js now:) (make numc in js, increment it in js and so on)

<script>


var counter = 0;

<?php
echo 'const numArray = [' . implode(', ', $rows) . '];';
?>
var max = numArray.length;
var table = document.getElementById("myTable");//Table
while(max > counter)
{
  var row = table.insertRow(1);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);

  //Variables in cells
  cell1.innerHTML = "Name";
  cell2.innerHTML = numArray[counter];

  counter = counter + 1;
}

</script>

2. make the whole cycle in php and render in js without while but with repeated parts