imposta valori dall'array jquery di oggetti php?

Question

Ricevo un elenco particolare di articoli del prodotto tramite ajax, passando il proprio ID univoco al server. Ora ogni prodotto ha il proprio set di proprietà che devo visualizzare a pagina con l'immagine del prodotto. Quando ho impostato i valori tramite jquery, è stato stampato solo l'ultimo valore nell'array. Di seguito sono riportati i miei file di codifica.

images.php

while($fetch = mysql_fetch_array($result)) 
     { 
     ?> 

     <div class="col-sm-4"> 
     <div class="thumbnail"> 

     <a class="productitemid" href="productpurchase.php?id=<?php echo $fetch['itemID'];?>"><img class="img-responsive productimage" src="uploadedfiles\<?php echo $fetch['imageURL'];?>" alt="<?php echo $fetch['imageURL'];?>" /></a> 

     <div class="text-center productitemname" style="font-weight:bold;"><?php echo $fetch['itemName']; ?></div> 
     <div class="badge col-sm-offset-1 productprice"><?php echo $fetch['price']; ?></div> 
     <span class="col-md-offset-7"><a class="productitemid btn btn-success" href="productpurchase.php?id=<?php echo $fetch['itemID'];?>">BUY</a></span> 

     </div> 
     </div> 
     <?php 
     } 

js File

$(document).ready(function(){ 
    $('.menProdCatgry').on('click',function(){ 
    $.ajax({ 
    type: "post", 
    url: "getselectedproducts.php", 
    data:{ 
    "prodId" : $('.menProdCatgry').attr('prodCatId') 
    }, 
    dataType: "json", 
    success: function(data){ 
    console.log(data); 
    $.each(data, function(){ 
    var getprodId = this.prodId; 
    var getimageURL = this.imageURL; 
    var getprice = this.price; 
    var getitemName = this.itemName; 
    var getitemID = this.itemID; 

    $('.productimage').attr('src','uploadedfiles\/'+getimageURL); 
    $('.productitemname').text(getitemName); 
    $('.productprice').text(getprice); 
    $('.productitemid').attr('href','productpurchase.php?id='+getitemID); 

     }); 

    }, 
    error: function(data){ 
    console.log(data); 
    } 

    }); 
    }); 
}); 

Answer 1

si può vedere il codice della foreach è solo sovrascrive i valori e gli attributi del

$('.productimage'), 
$('.productitemname') 
// and so on 

in modo che solo vedere gli ultimi dati della risposta

$.each(data, function() { 
      var getprodId = this.prodId; 
      var getimageURL = this.imageURL; 
      var getprice = this.price; 
      var getitemName = this.itemName; 
      var getitemID = this.itemID; 

      // create a tag 
      var a = $('<a/>'); 
       a.attr('href', 'productpurchase.php?id='+getitemID); 
      // create new image 
      var img = $('<img/>'); 
       img.attr('src', 'uploadedfiles/'+getimageURL); 

      var prodname = $('<div/>') 
       prodname.html(getitemName); 

      var prodprice = $('<div/>'); 
       prodprice.html(getprice); 
       // insert image to a 
       a.append(img); 

      var container = $('<div/>'); 
      // combine them all 
      container.append(a); 
      container.append(prodname); 
      container.append(prodprice); 
      // append to document 
      // you can change this according to you need 
      // to accomplish 
      $('body').append(container); 

     }); 

qui ho creato un elemento DOM dinamico per ogni iterazione del foreach allora verrà creato un nuovo set di dati allora inserirà/include/accodare per l'elemento HTML

Answer 2

Una soluzione alternativa ..

Se si è aggiunto una sorta di identificativo per ogni prodotto-blocco, come di seguito:

<div class="thumbnail" id="prodId<?php echo $fetch['prodId'];?>"> 

si potrebbe restringere il selettore nella vostra each ad una specifica sc ope:

$.each(data, function(){ 
    var getprodId = this.prodId; 
    var getimageURL = this.imageURL; 
    var getprice = this.price; 
    var getitemName = this.itemName; 
    var getitemID = this.itemID; 
    var myScope = '#prodId' + getprodId; 

    $('.productimage', myScope).attr('src','uploadedfiles\/'+getimageURL); 
    $('.productitemname', myScope).text(getitemName); 
    $('.productprice', myScope).text(getprice); 
    $('.productitemid', myScope).attr('href','productpurchase.php?id='+getitemID); 
}); 

Questo farà in modo che solo le classi trovate all'interno della vostra definito portata (#prodIdX) vengono selezionati e modificati.