CODEWITHSUNDEEP
javascriptphpjqueryhtmlarrays
jumpman8947
jumpman8947

Reputation: 581

PHP array not displaying all values through loop

I am writing a php function which appends content to a $results variable and will return all the results appended to it.

I have a variable $myArray which holds many separate arrays and looks like the below

Array(
[0] => ABC
[1] => DEF
[2] => GHI
[3] => JKL
 )
Array(
[0] => MNO
[1] => 123A
[2] => 123B
[3] => 123C
 )
Array(
[0] => orange
[1] => yellow
[2] => green
[3] => blue
 )

In my code i loop though content to generate buttons and data tot he screen. i would ideally like if the first button is pressed the contents of the first array (ABC,DEF,GHI,JKL), the second button (MNO, 123A,123B,123C) etc etc.

Here is my loop to generate content

for($index=0; $index < count($exampleArray); index++){
  $myArray = array_values(array_filter($exampleArray[$index]["Column2"]));
  $returnVariable .= '<td>
    <button type="button" class="open-my-modal btn btn-primary" 
        data-numbers="'.htmlspecialchars(json_encode($myArray), ENT_QUOTES, 'UTF-8').'" </td>';

The above code generates different buttons depending on the data that is being passed through, and to be sent to a modal. The part of the modal code where i create an id is below

$returnVariable .= '<tr>
                        <td><span id ="value1"></span></td>
                        <td><span id ="value2"></span></td>
                        <td><span id ="value3"></span></td>
                        <td><span id ="value4"></span></td>
                    </tr>

Then i have a script where when the modal is opened i link the data, to the html id.

$returnVariable .= '<script>

$(document).ready(function () {             
$(".open-my-modal").click(function(){
  $("#value1").html($(this).data("numbers")[0]);

The problem is no matter what button the same information is being displayed. And the only data that is being passed though on any button is ABC,DEF,GHI,JKL.

I i call 

$("#value1").html($(this).data("numbers")[0]); Only ABC will show.

if i call

$("#value1").html($(this).data("numbers")); It shows ABC up to JKL

The data is supposed to change dynamically depending on which button is clicked. MNO etc, or orange, yellow never shows up. it only is taking the first array, for every button.

The content will be looped though dynamically for example

<td><span id ="value1"></span></td> = ABC
                    <td><span id ="value2"></span></td>= DEF
                    <td><span id ="value3"></span></td>= GHI
                    <td><span id ="value4"></span></td>= HIJ

Next Button clicked values should = 

<td><span id ="value1"></span></td> = MNO
                    <td><span id ="value2"></span></td>= 123A
                    <td><span id ="value3"></span></td>= 123B
                    <td><span id ="value4"></span></td>= 123C

etc, etc

Upvotes: 0

Views: 412

Answers (1)

Andy
Andy

Reputation: 5395

The reason this is happening is because $myArray is being overwritten. You posted:

Array(
[0] => ABC
[1] => DEF
[2] => GHI
[3] => JKL
 )
Array(
[0] => MNO
[1] => 123A
[2] => 123B
[3] => 123C
 )
Array(
[0] => orange
[1] => yellow
[2] => green
[3] => blue
 )

Well, the array keys [0],[1],[2],[3] are the same in each instance and there is nothing to "contain" each array.

You really need a multidimensional array, more like this:

[0] => [
    [0] => ABC
    [1] => DEF
    [2] => GHI
    [3] => JKL
],
[1] => [
    [0] => MNO
    [1] => 123A
    [2] => 123B
    [3] => 123C
],
// ...

If you use var_dump($myArray[0]); you will get the "first" set (arrays are 0-indexed):

[0] => ABC
[1] => DEF
[2] => GHI
[3] => JKL

And var_dump($myArray[1]); gives you the second set:

[0] => MNO
[1] => 123A
[2] => 123B
[3] => 123C

etc...

The key in the multi dimensional array can correspond to the button pressed, e.g.

  • Button 1: $myArray[0]
  • Button 2: $myArray[1]
  • Button 3: $myArray[2]
  • Button 4: $myArray[3]

Upvotes: 1

Related Questions