如何在JS中循环CDATA字段（Foreach）

Question

I have a list of widgets in wordpress. One of those widgets is a slider. As the slider needs the ID and other information, I am parsing a cdata array to the website using the wp_localize_script - one for every slider. So in my site, right after the footer element, i have the following code (example)

<script type='text/javascript'>
/* <![CDATA[ */
var sliderID = {"slider":"57d7b035941e9"};
var sliderID = {"slider":"57d7b03596340"};
/* ]]> */
</script>

Each number is a php "uniqid();"-number to set a unique ID for the slider. I am also loading a "sliderscripts.js" to the footer if the slider is active in the current site (in the footer, but below the CDATA). In the sliderscripts.js I now want to make a slider foreach ID. Using the ID is no problem like

$(document).ready(function () {
    $('#'+sliderID.slider).owlCarousel({
... my options ...
});

Now the question: How can I, using JS, loop that? If it would be

<script type='text/javascript'>
/* <![CDATA[ */
var sliderID = {"slider":"57d7b035941e9","slider":"57d7b03596340"};
/* ]]> */
</script>

there wouldnt be a problem. I need to foreach CDATA with var SliderID do something. Would be great if you help me!

thank you!

Answer 1

Even if @CBroe had a great idea, it was way too much work to start by 0. For others with the same problem, this is my solution:

1. Generate ID

$sid = uniqid(); // sid = slider-ID - FE: 123

will generate a unique ID for every slider

2. Generate Password

As I've been told not to use uniqid multiple times in a function (it should work but it seems to be a bad technique?) I am using the wordpress hook generate password to generate an ID-similar element.

$ID2 = wp_generate_password(20, false, false); // generates an password / ID with 20 digits. FE: 12345678912345678911

3. Add ID and data-attribut to the code

I now open the owlslider code like

<div id="slider_<?php echo $sid; ?>" class="owls" data-id2="<?php echo $ID2; ?>"

4. Localize Script

Now I am also localizing these values, so I can get them with JS

$slidersettings = array(
    'slider' => $sid,
    'url' => plugins_url(),
);
$sliderhandle = 'sl_'.$ID2; // will be sl_12345678912345678911

wp_localize_script( 'slider', $sliderhandle, $slidersettings );

5. Build Slider.

Last but not least I enqueue a custom script where I check for the IDs to set every slider like this

// check for all div's with the class "owls" AND id starts with "slider"
$('div.owls[id^="slider"]').each( function() { 
    var $div = $(this);
    var ID2 = $div.data('ID2'); // Now I grab the ID2 / 2nd ID out of the data-attribute


var cdata = window['sl_' + ID2]; // this now tells me in which CDATA Array I have to look for my values

$install= $( '#slider_' + cdata.slider); // slider_123 <- 123 = uniqid.

        $install.owlCarousel({
... standard owl stuff here...
})

thats it. Hope this will help someone else sometime.... all the best