Looping and displaying javascript array content, from html data attribute

Question

I have an array which is being passed though html data element

  <button type="button" class="open-my-modal btn btn-primary" 
data-number="'.htmlspecialchars(json_encode($myArray), ENT_QUOTES, 'UTF-8')

The Array holds a set of different arrays which have a format like this

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
)

The data is being passed to a modal like the field id is shown below

<tr>
    <td><span id ="exampleone"></span></td>
    <td><span id ="exampletwo"></span></td>
    <td><span id ="examplethree"></span></td>
    <td><span id ="examplefour"></span></td>
</tr>

and a script which links the id's and the data

<script>

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

This displays ABC,DEF,GHI,JKL all on the screen correctly. But i want to dynamically do this. For example

<td><span id ="exampleone"></span></td> <!-- output will be ABC-->
<td><span id ="exampleone"></span></td><!-- output will be DEF-->
etc, etc

I am pulling my data dynamically so each array may have more than 4 entries it will vary from time to time.

I am stuck on where i need to get the length of numbers(data) and how to generate and id for it dynamically

(<td><span id ="dynamically generated">) 

and then how to dynamically link the id with the correct

data($("#number").html($(this).data("number"));)

Answer 1

To generate the items in your list dynamically you can use the following code

HTML (replace your code)

<tr id="parentNode"></tr>

JavaScript (put inside your jQuery code)

$.each($(this).data('number'), function(index, value){ $("#parent").append($('<td>').append($('<span>', {'id' : 'example' + index , 'text' : value}))); });

This will generate <td><span id=example1>value1</span></td> and so on.

I strongly suggest you to use AJAX to get the data from your server. Here is a guide