2017-07-17 6 views
0

要素がハードコードされているJavaScript配列を作成する必要がありますが、データベースからその要素をフェッチしたいと思います。出来ますか?もしそうなら、どうですか? はここに私のコードyiiを使用してデータベースから値を取得してJavaScript配列を初期化するにはどうすればよいですか?

<div id="wrapper"></div> 
<script> 
var container = document.getElementById("wrapper"); 
var array = ["../Images/stu_9.png", "../Images/stu_9.png", "../Images/stu_9.png", "../Images/stu_9.png"]; 
for(i=0; i<array.length; i++){ 
    container.insertAdjacentHTML('beforeend', '<img src="'+array[i]+'">'); 
} 
</script> 
</head> 
<body> 
<div id="wrapper"></div> 
+0

だから、あなたは、データベース内のフィールドから画像の場所を取得し、VaRのarray' 'にそれらを渡す方法を求めています?アクセスする前にDOMに書き込む必要があります。また、 'ID'も重複しています。実際に' array'という名前を変数名として使用するべきではありません。なぜなら、 'Array'という名前と連続しているからです。 –

+0

あなたの答えを詳しく教えてください。どこでドキュメントオブジェクトモデルを書くことができますか? – Alvi

答えて

0

あなたは、データベース内のフィールドに保存された画像のパスを持っていると仮定している、あなたがそれらにアクセスすることができます前に、DOMにそれらを記述する必要があります。これはによって行われ、という変数をページ自体にエコーします。これらのファイルパスを訪問者に見せたくない場合は、をCSSで非表示にすることができます。

<?php 

$image_paths = []; // An array containing your image paths, retrieved from the database 

echo "<div id='images'>"; 
foreach($image_paths as $image_path) { 
    echo "<div>" . $image_path . "</div>"; 
} 
echo "</div>"; 

?> 

これはあなたを与えるだろう。そうで

<div id="images"> 
    <div>../Images/stu_9.png</div> 
    <div>../Images/stu_10.png</div> 
    <div>../Images/stu_11.png</div> 
</div> 

とします。

あなたはそれが訪問者に表示されていないので、その後、これを隠し、それでもDOMに表示されていることができます。

#images { 
    display: none; 
} 

することはできその後、ターゲットあなたJavaScriptを使用して、この目に見えないDOM:

var images_array = []; 
 
var images = document.getElementById('images'); 
 

 
for (var i = 0; i < images.children.length; i++) { 
 
    images_array.push(images.children[i].innerHTML); 
 
} 
 

 
console.log(images_array);
#images { 
 
    display: none; 
 
}
<div id="images"> 
 
    <div>../Images/stu_9.png</div> 
 
    <div>../Images/stu_10.png</div> 
 
    <div>../Images/stu_11.png</div> 
 
</div>

はまた、あなたの上記のコードでは、あなたが重複したIDを持っていることに注意してくださいこれは無効なマークアップです。また、実際には単語arrayを変数名として使用しないでください。名前はArrayと連続しています。私の例ではimages_arrayに置き換えました。

希望すると便利です。 :)ここで

+0

しかし、配列のデータベースからイメージパスを取得する方法はありますか? このコードは機能していません <?php $ image_paths = []; //データベースから取得したイメージパスを含む配列 echo "

"; foreach($image_paths as $image_path) { echo "
" . $image_path . "
"; } echo "
"; ?> Alvi

+0

あなたのデータベースの正確な設定(および接続方法)が不明ですが、Yiiを使用していると考えると、 '$ array = Yii :: app() - > db-> createCommand() - > select( 'images') - > from( 'table') - > queryAll(); '。詳細については、[**このページ**](http://www.yiiframework.com/doc/guide/1.1/en/database.query-builder)を参照してください。配列に情報を取得すると、上記の**が**機能します(この例では実証済みです)。 –

+0

上記のコードを追加すると、エラーが発生します "不明なメソッドを呼び出す:yii \ db \ Command :: select()" $ image_paths = Yii :: $ app-> db-> createCommand() - > select() 'Car_Image') - > from( 'register_car') - > queryAll(); – Alvi

0
You can use client side script for this.Follow below steps 
    1. Get an array of images path from database in controller action. 
    2 Render this array on view part. 
    3. Write client side script in your view file i.e. $this->registerJs("script code here"); 

は、ビューファイルの完全なコードです:

<?php 
$this->registerJs('var container = document.getElementById("wrapper"); 
var array = '.$arr_Images_From_controller.'; 
for(i=0; i<array.length; i++){ 
container.insertAdjacentHTML("beforeend", "<img src="/'+array[i]+/'">"); 
}'); 
?> 
関連する問題