looping php array values to html data attribute

Question

I have an array $myArray

Array ( 

[0] => Array (
        [Number] => 039
        [Fruit] => Apple
        [Level] => Low
        [Names] =>
            Array (
                [6] => Name 1
                [7] => Name 2
                [19] => Name 3
                [25] => Name 4
        )
        )
[0] => Array (
        [Number] => 007
        [Fruit] => Plum
        [Level] => High
        [Names] =>
            Array (
                [3] => Name 1
                [5] => Name 2
                [9] => Name 3
                [11] => Name 4
                [12] => Name 5
                [19] => Name 6
                [22] => Name 7
                [30] => Name 8
        )
        )
 [0] => Array (
        [Number] => 486
        [Fruit] => Grape
        [Level] => Medium
        [Names] =>
            Array (
                [6] => Name 1
                [15] => Name 2

        )
        )

I want to loop though this array for all the set of names, and then i will display them later in html though javascript

for($index=0; $index < count($myArray); $index++){


    $name = array_values(array_filter($myarray[$index]["Name"]));


    <button type="button" class="open-my-modal btn btn-primary" 
        data-names="'.$name.'"

The output of Names is as below

Array ( 
   [0] => Name 1
   [1] => Name 2
   [2] => Name 3
   [3] => Name 4
  )
Array ( 
   [0] => Name 1
   [1] => Name 2
   [2] => Name 3
   [3] => Name 4
   [4] => Name 5
   [5] => Name 6
   [6] => Name 7
   [7] => Name 8
   [8] => Name 9
  )
Array ( 
   [0] => Name 1
   [1] => Name 2
)

Later in my code i want to loop though each set of numbers and print them to the screen. For example loop though the first array and print names 1-4.

I am getting an error of

Notice: Array to string conversion

on data-names="'.$name.'"

How can i pass the array of Names so i can later call them in html.

Also: i am writing this in a huge php function so, php is written straightforward and html is in quotes. any content that is displayed on the screen is appended to a return variable.

Answer 1

The error you get says that you are trying to concat array like you do with string. You can't do it.

you can use implode to join array to a string with deilimeter (for java script use)

echo '<button data-number="'.implode(',', $numbers).'">Button</button>'

It will results HTML like this:

<button data-number="1,2,3,4">Button</button>

Than you can split it with java script and loop over the numbers

implode Documentation

*EDIT If your array contain four arrays you will need another loop to merge the array to one array