Как я могу заменить данные html массивом json, используя jquery и ajax
Я пытаюсь заменить данные на странице продуктов, над которой я работаю, используя ajax. Я получил данные из php в виде массива, но когда я пытаюсь использовать каждый итератор в jquery, используется последняя строка из массива json. Я предполагаю, что он заменяет все необходимые поля html каждым элементом из массива json вместо замены только одного поля одним элементом. Код Jquery приведен ниже. Источник изображения получен из базы данных и должен заменить текущий источник изображения.
$.get('product2.php', function (data) {
// console.info(data);
var output = JSON.parse(data);
$.each(output, function () {
console.info(1);
var productname = this['name'];
var productImage = "data/" + this['image'];
var productPrice = this['unit_price'];
var productId = this['id'];
if (output) {
$('.productimg').attr('src', productImage);
}
});
console.info(output);
это html-код
<div class = "col-sm-12 col-md-6 col-lg-4 p-b-50">
<!-- Block2 -->
<div class = "block2">
<div class = "block2-img wrap-pic-w of-hidden pos-relative block2-labelnew">
<img id='<?php echo "data/$row[id]"; ?>' class = "productimg " height = "300px"
src='<?php echo "data/$row[image]"; ?>' alt = "IMG-PRODUCT">
<div class = "block2-overlay trans-0-4">
<a href = "#" class = "block2-btn-addwishlist hov-pointer trans-0-4">
<i class = "icon-wishlist icon_heart_alt" aria-hidden = "true"></i>
<i class = "icon-wishlist icon_heart dis-none" aria-hidden = "true"></i>
</a>
<div class = "block2-btn-addcart w-size1 trans-0-4">
<!-- Button -->
<button class = "flex-c-m size1 bg4 bo-rad-23 hov1 s-text1 trans-0-4" data-id = "1" data-name = "product 1"
data-summary = "summary 1" data-price = "10" data-quantity = "1" data-image = "images/img_1.png">
Add to Cart
</button>
</div>
</div>
</div>
на странице есть 12 этих div, сгенерированных с другой страницы после запроса к базе данных. Это личный проект, над которым я пытаюсь работать вот несколько фотографий
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
$('.productimg').attr('src', productImage);
Эта строка кода заменит все ваши изображения последним изображением в массиве, потому что вы используете один и тот же класс для всех тегов <img>.
вместо этого используйте следующий фрагмент кода
$(image_id).attr('src', productImage);
где image_id должен быть идентификатором HTML тега <img>
Вы можете попробовать использовать точечную нотацию JavaScript, поскольку JSON означает нотацию объектов JavaScript, она работает так же, как и любой другой объект JavaScript.
Это означает, что вы можете сделать это:
<script>
//Out JSON string:
var ProductJSON = {
"Productname": "Box of code",
"Price": 5.50,
"Weitght": 15,
"isMetric": true
}
//Putting it in HTML with JS (the ugly way)
document.write("ProductName: " + ProductJSON.Productname );
document.write("Price: " + ProductJSON.Price);
document.write("Weitght: " + ProductJSON.Weitght);
</script>
Если я правильно понимаю ваш код, вы перезаписываете свои переменные. Вы можете определить свои переменные как массив и перебирать их для создания новых элементов.
Я надеюсь, что это подтолкнет вас в правильном направлении.
Использование класса в качестве селектора $('.productimg').attr('src', productImage); изменит все изображение, поскольку несколько тегов имеют одно и то же имя класс, чтобы изменить изображение определенного тега, используйте я бы$('#'+productId ).attr('src', productImage);.
я надеюсь, что это поможет вам
$.get('product2.php', функция (данные) {
var html = '';
var obj = JSON.parse(data);
$.each(obj, function (key, value) {
var productname = value.name;
var productImage = "images/" + value.image;
var productPrice = value.unit_price;
var productId = value.id;
html += '<img class = "productimg" height = "300px" src = "' + productImage + '">';
});
$('.productimg').html(html);
});