ustaw wartości z tablicy jquery obiektów php?

Question

Otrzymuję szczegółową listę produktów za pośrednictwem ajax, przekazując ich unikalny identyfikator do serwera. Teraz każdy produkt ma swój własny zestaw właściwości, które muszę wyświetlić na stronie z obrazem produktu. Kiedy ustawiam wartości przez jquery, drukowana jest tylko ostatnia wartość w tablicy. Poniżej znajdują się moje pliki kodowania.

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

Możesz zobaczyć kod foreach jest nadpisanie tylko wartości i atrybuty

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

więc tylko ty zobacz ostatnie dane odpowiedzi

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

     }); 

tu stworzył dynamiczną elementu DOM dla każdej iteracji foreach to stworzy nowe zestawy danych to będzie wstawić/include/dołączania do elementu html

Answer 2

Alternatywnym rozwiązaniem ..

Jeśli dodałeś jakiś identyfikator dla każdego produktu bloku, jak poniżej:

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

można zawęzić wybierak w swojej each do konkretnego 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); 
}); 

To będzie upewnić się, że tylko te zajęcia w zdefiniowanym zakresu (#prodIdX) są wybierane i zmieniane.