Creating a JS array from PHP array (2-dimensional)

When I do

<?php
  $list = array(
    "1940s", array("19463buntitled", null),
    "1950s", array("1958CelebratingHooligans", null), array("1958WholeSchool", null)
  );
?>

<script>
  console.log(<?= json_encode($list) ?>);
</script>

In the console I see:

[
  "1940s", 
  ["19463buntitled", null], 
  "1950s", 
  ["1958CelebratingHooligans", null], 
  ["1958WholeSchool", null]
]

which is not the same as in post #3

Object { "1920s - 1930s": {…}, 1940s: {…}, 1950s: {…}, 1960s: {…}, "Hatfield Peverel": {…} }

I’m pretty sure this will be easy to solve, once we are on the same page as what is beiong passed to the front-end from the PHP.

1 Like

Sorry, squire. It’s a cut-down version. It should be the same as post #19, I think…

Edit: I’ve uploaded the half-working page here: https://webdesignpaciano.com/trinity2/tgsadmin/get-slugs.inc.php

Thanks, John. That might work for the second level, but there is no pattern in the first level.

Try to var_export() the array, that should give you a representation you can work with.

1 Like

I am having difficulty in trying to understand the problem that you are trying to solve.

Is it possible to show a couple of directories with sample files and the results you would like to achieve?

Ah-ha, thanks

array (
  '1940s' => 
  array (
    '19463buntitled' => NULL,
  ),
  '1950s' => 
  array (
    '1958CelebratingHooligans' => NULL,
    '1958WholeSchool' => NULL,
  ),
)

Owzat? I must admit my little brain is frying nicely tonight!

- galleries
- - 1940s
- - - 19463buntitled.jpg
- - - captions
- - - - 19463buntitled.md
- - 1950s
- - - 1958CelebratingHooligans.jpg
- - - 1958WholeSchool.jpg
- - - captions
- - - - 1958CelebratingHooligans.md
- - - - 1958WholeSchool.md

Hopefully, that helps explain?

1 Like

Arr, 'tis better. Now I can reproduce.

I looked at your demo page.

What should be in the second select when the user selects “1940” in the first?

And what should be in the second select when the user selects “1950” in the first?

Cheers, man

1940s should have 1 item: 19463buntitled

1950s should have 2 items: 1958CelebratingHooligans and 1958WholeSchool

This should do what you want:

<?php
  $list = array (
    '1940s' =>
    array (
      '19463buntitled' => NULL,
    ),
    '1950s' =>
    array (
      '1958CelebratingHooligans' => NULL,
      '1958WholeSchool' => NULL,
    ),
  );
?>

<form method="post">
  <div>
    <label for="gallery">Gallery:</label>
    <select id="gallery" name="gallery"></select>
  </div>
  <div>
    <label for="slug">Slug:</label>
    <select id="slug" name="slug"></select>
  </div>
</form>

<script>
  function getOpts(obj){
    let html = "<option>--Select--</option>";

    for (let [key, value] of Object.entries(obj)) {
      html += `<option>${key}</option>`;
    }

    return html;
  }

  const sluglist = <?= json_encode($list) ?>;
  const select1 = document.getElementById("gallery");
  const select2 = document.getElementById("slug");

  select1.innerHTML = getOpts(sluglist);

  select1.addEventListener("change", function() {
    const key = this.options[this.selectedIndex].value;
    const obj = sluglist[key];
    select2.innerHTML += getOpts(obj);
  });
</script>

Off for the evening now, but let me know if anything is unclear and I can pick up tomorrow morning :slight_smile:

1 Like

Thanks squire. One little tweak and it’s just the biscuit.

select2.innerHTML = getOpts(obj);

Buona notte

Oh yeah. Oops :slight_smile:
Glad it’s working.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.