Making objects inside an array using plain javascript/jquery

Question

I'm making a WordPress theme, using Vegas for a background slider. First of all, with hard coded image path, I made the slider working. Now I'm trying to make it dynamic.

Vegas doesn't support HTML data attributes, so I need to follow their JS syntax . The syntax of Vegas for declaring slides are like below:

$elmt.vegas({
    slides: [
        { src: '/img/slide1.jpg' },
        { src: '/img/slide2.jpg' },
        { src: '/img/slide3.jpg' },
        { src: '/img/slide4.jpg' }
    ]
});

The issue is, I'm getting my slider images using PHP query, and getting the exact size of those images using wp_get_attachment_image_src() . So I'm making an array of those images, and the PHP function returns:

Array ( [0] => http://localhost/oneproject/wp-content/uploads/2016/05/slider-image-1200x260.jpg [1] => http://localhost/oneproject/wp-content/uploads/2016/05/disabled-allowance-870x260.jpg )

So I'm passing them using wp_localize_script() with json_encode( my_array_func() ) .

In .js file I'm getting this:

var slider_images = JSON.parse( one.slider_images );
console.log(slider_images);

The console outputs the following:

I'm struggling now, how can I use this JSON array and use it for Vegas with their given syntax?

I tried (may be looked like amateurish):

$("#my-slider").vegas({
    slides: [

        $.each(slider_images, function( index, value ) {
            //console.log(value);
            { src: "'"+ value +"'" } + ","
        })

    ]
});

But it's not loading the images, and the slider is not working.

I also tried making JS Object within an array:

var myObject = new Object();
myObject.src = slider_images;
$.each(slider_images, function( index, value ) {
   myObject.src = value;
});
var myString = JSON.stringify(myObject);
console.log(myString);

But getting the first one nice, but the second one got double quotes around, and not working.

I'm completely stuck. Any assistance would be highly appreciated.

Answer 1

You are using this right.

var slider_images = JSON.parse( one.slider_images );
console.log(slider_images);

What you can do is this.

First, create a new array where you will store the data-compatible objects.

var newArray = []

Next is loop through each of the slider images and create an object which you will push in the newArray above.

slider_images.forEach(function(e, i){
    var newData = {
        src: e
    };
    newArray.push(newData);
});

Then finally, use the newly created array in the slider.

$("#my-slider").vegas({
    slides: newArray
});

Let me know if this works.

Answer 2

You do know that if you use JSON.stringify(object) then you have to parse it via JSON.parse(object) to 'decode' it? It seems to be your problem.