Using JSON in JQuery library

Question

Using JSON in JQuery library

Navigation

#1 by (2 votes)
#2 by (1 votes)

2

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 stands, it works perfectly, but the images to be displayed must come from a query in the database. So, I'm creating a JSON whose result 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'm running the query in the database and putting 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 instead of the structure in which I declare the images fixedly? That is, how do 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 !!!

php jquery json

asked by anonymous 10.09.2016 / 23:48

2 answers

1

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

It would look like this

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

11.09.2016 / 00:02

HTML and CSS - Center Tabs to the center of the page Div with automatic height dropdown menu

score 2 · Accepted Answer

Place this var obj = JSON.parse('<?= $jsonImagens; ?>'); before the slides code, and then map that array to format as you need it.

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

The code could look 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 causes JavaScript to use var slides = obj[0].map . The ideal thing was to have JavaScript in var slides = obj.map and in PHP:

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