プレーンJavaScript/jqueryを使用して配列内にオブジェクトを作成する

Question

私は、Vegasを背景スライダとして使用してワードプレステーマを作成しています。まず、ハードコーディングされたイメージパスで、私はスライダを動作させました。今私はそれを動的にしようとしています。

VegasはHTMLデータ属性をサポートしていないため、their JS syntaxに従う必要があります。

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

問題がある、私はPHPのクエリを使用して、私のスライダー画像を取得し、wp_get_attachment_image_src()を使用してそれらの画像の正確なサイズを取得しています：スライドを宣言するためのベガスの構文は以下のようなものです。だから私は、それらの画像の配列を作ってるんだ、とPHPの関数が返す：

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) 

をだから私はjson_encode(my_array_func())とwp_localize_script()を使用してそれらを渡しています。

私はこれを取得してい.jsファイルで：

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

コンソールには次のように出力します

私はがどのように私は、このJSON配列を使用してのためにそれを使用することができ、今苦労していますそれらの与えられた構文を持つVegas？私が試した

は（素人のように見えたことがあります）：

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

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

    ] 
}); 

しかし、それは、画像をロードしていない、とスライダーが機能していません。

私はまた、アレイ内JSオブジェクトを作ってみました：

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); 

しかし、最初の1素敵を取得しますが、二番目は二重引用符で囲むを得て、動作していません。

私は完全に固執しています。どんな支援も高く評価されます。

Answer 1

この権利を使用しています。

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

あなたができることはこれです。

まず、データ互換オブジェクトを格納する新しい配列を作成します。

var newArray = [] 

次に、それぞれのスライダーイメージをループし、上記のnewArrayでプッシュするオブジェクトを作成します。

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

最後に、スライダで新しく作成された配列を使用します。

​​

これが動作するかどうかを教えてください。

Answer 2

doJSON.stringify(object)を使用すると、それを解読するにはJSON.parse(object)で解析する必要があることを知っていますか？あなたの問題だと思われます。