Use JSON in Jquery library

Question

I’m using the "Vegas Background Slideshow" library in a project with the following code:

<script>
    $("#main").vegas({
        slides: [
        { src: "assets/site/img/uploads/banners/01.jpg" },
        { src: "assets/site/img/uploads/banners/02.jpg" },
        { src: "assets/site/img/uploads/banners/03.jpg" },
        { src: "assets/site/img/uploads/banners/04.jpg" }
        ],
        animation: 'random',
        align: 'center',
        valign: 'center',
        cover: 'false',
        delay: 9000,
        transitionDuration: 1000,
        timer: false,
        overlay: 'assets/site/vendors/vegas/overlays/07.png',
        walk: function(index) {
            if (index == 2) {
                $('#info').text("Slide index " + index);
            }
        }
    });

    $('a.slide-previous').on('click', function(e) {
        $("#main").vegas('previous');
        e.preventDefault();
    });

    $('a.slide-next').on('click', function(e) {
        $("#main").vegas('next');
        e.preventDefault();
    });
</script>

As it is it works perfectly, but the images to be displayed should come from a query in the database. So I’m creating a JSON whose output I can print like this:

var obj = JSON.parse('<?= $jsonImagens; ?>');

The result is as follows:

[["assets/site/img/uploads/banners/01.jpg","assets/site/img/uploads/banners/02.jpg","assets/site/img/uploads/banners/03.jpg","assets/site/img/uploads/banners/04.jpg"]]

I am performing the query in the database and placing the result in the array as follows:

<?php
$imagens = array();
$sql = "select * from tb_banner where status = 1";
$search_query = mysql_query($sql);
while($select = mysql_fetch_array($search_query)){
    $imagens[] = $select["imagem"];
    $textos[] = $select["texto_principal"];
}

$res = array($imagens);
$jsonImagens = json_encode($res, JSON_UNESCAPED_SLASHES);
?>

My question is: what should I do to consume this result in place of the structure in which I declare the images fixed? That is, how I declare this JSON in place of the code below?

slides: [
        { src: "assets/site/img/uploads/banners/01.jpg" },
        { src: "assets/site/img/uploads/banners/02.jpg" },
        { src: "assets/site/img/uploads/banners/03.jpg" },
        { src: "assets/site/img/uploads/banners/04.jpg" }
        ],

Thanks for the help!!!

Answer 1

Put that var obj = JSON.parse('<?= $jsonImagens; ?>'); before the slide code, and then do a mapping of this array to format as accurate.

In the example below I transform each element of the array into an object with the key src and the original value of that element of the array as key.

The code could go like this:

<script>
    var obj = JSON.parse('<?= $jsonImagens; ?>');
    var slides = obj[0].map(function(img){
        return {src: img};
    });
    $("#main").vegas({
        slides: slides,
        animation: 'random',
        align: 'center',
        valign: 'center',
        cover: 'false',
        delay: 9000,
        transitionDuration: 1000,
        timer: false,
        overlay: 'assets/site/vendors/vegas/overlays/07.png',
        walk: function(index) {
            if (index == 2) {
                $('#info').text("Slide index " + index);
            }
        }
    });

    $('a.slide-previous').on('click', function(e) {
        $("#main").vegas('previous');
        e.preventDefault();
    });

    $('a.slide-next').on('click', function(e) {
        $("#main").vegas('next');
        e.preventDefault();
    });
</script>

Note:

in PHP you are sending an array with an array inside, this is unnecessary and makes in Javascript you have to use var slides = obj[0].map. The ideal was to have in Javascript var slides = obj.map and in PHP:

// $res = array($imagens); <- retirar esta linha e mudar em baixo
$jsonImagens = json_encode($imagens, JSON_UNESCAPED_SLASHES);

Answer 2

To make this transformation you could use the javascript map function.

Would look like this

var listaUrls = obj[0].map(function( url ){
      return { src: url };
 })