CODEWITHSUNDEEP
phpjquerymysql
MojtabaSh
MojtabaSh

Reputation: 637

How to use loop for multiple arrays imported from Database

In server side I give table data from MySql and I send it with json_encode to JQuery:

<?php
include 'DB.php';

$result20 = mysql_query("SELECT * FROM Gallery WHERE Section = 'Chosen' AND ID = 19");          
$array20 = mysql_fetch_row($result20);                          

$result19 = mysql_query("SELECT * FROM Gallery WHERE Section = 'Chosen' AND ID = 19");          
$array19 = mysql_fetch_row($result19);  

$data = array();
$data['Div20'] = $array20;
$data['Div19'] = $array19;
echo json_encode($data);
?>

json_encode export this arrays: {"Div20":["Image20","20.jpg"],"Div19":["Image19","19.jpg"]}

but, in client side I need use a loop for use all arrays in events. When I use for, it's not work with multiple arrays, how to do it?

$(function() {
  $.get('data.php' ,function(response)
  {
     var data = jQuery.parseJSON(response);
     var array;
     for(array in data)
     {
       var ImageID = data.array[0];
       var ImageSrc = data.array[1];

       $('#'+ImageID ).click(function(){
            //some codes
       })
     }
   })
})

Upvotes: 1

Views: 119

Answers (5)

Yahoo - Jungly
Yahoo - Jungly

Reputation: 75

Try this..

$(function() {

$.get('data.php' ,function(response) { 

var data = jQuery.parseJSON(response);
 $.each(data,function(k, v){
       var ImageID = v[0]; 
       var ImageSrc = v[1];
  $('#'+ImageID ).click(function(){
     //some codes`enter code here`
     })

}) })

Upvotes: 0

Akaryatrh
Akaryatrh

Reputation: 531

"array" is not an attribute of your json object, it's just an argument of your for ... in loop. So you must use it as a dynamic value. Moreover you missed using a # to target properly the element id.

var data = {"Div20":["Image20","20.jpg"],"Div19":["Image19","19.jpg"]};
for(array in data)
{
    var ImageID = "#"+data[array][0];
    var ImageSrc = data[array][1];
    $(ImageID).on("click",function(){
        //some codes
    });
};

Avoid using $.each() loop as someone recommended above, jQuery loops are usually slower than native loops.

Upvotes: 0

Magnus Engdal
Magnus Engdal

Reputation: 5634

Replace .array with [array] in your for loop:

 for(array in data)
 {
   var ImageID = data[array][0];
   var ImageSrc = data[array][1];
 }

Upvotes: 0

rynhe
rynhe

Reputation: 2529

Try this

$(function() {
  $.get('data.php' ,function(response) {
     var data = jQuery.parseJSON(response);
     $.each( data, function( key, value) {        
       var ImageID  = value[0];
       var ImageSrc = value[1];

       $("#"+ImageID ).click(function(){
            //some codes
       })     
   })
})

Upvotes: 1

Rohan Kumar
Rohan Kumar

Reputation: 40639

It will work if you add # to your imageid like,

$('#'+ImageID ).click(function(){
    //some codes
});

I've tried some code for you,

var json={"Div20":["Image20","20.jpg"],"Div19":["Image19","19.jpg"]};
for(div in json){
    ImageID=json[div][0];
    ImageSRC=json[div][1];
    $('#'+ImageID)
           .attr('src',ImageSRC)
           .click(function(){
               alert(this.src);            
           });
}

Demo

Upvotes: 1

Related Questions