Как заменить html-данные массивом json с помощью jquery и ajax

Question

Я пытаюсь заменить данные на странице продуктов, над которой я работаю, используя ajax.Я получил данные из php в виде массива, но когда я пытаюсь использовать каждый итератор в jquery, используется последняя строка из массива json.Я предполагаю, что он заменяет все необходимые html-поля каждым элементом массива json вместо того, чтобы заменять только одно поле одним элементом.Код Jquery приведен ниже ... источник изображения получен из базы данных и должен заменить текущий источник изображения

$.get('product2.php', function (data) {
    // console.log(data);
    var output = JSON.parse(data);
    $.each(output, function () {
        console.log(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.log(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 сгенерирован с другой страницы после запроса к базе данных.Это личный проект, над которым я пытаюсь работать. Вот несколько картинок

Answer 1

Надеюсь, это вам поможет

$. Get ('product2.php', function (data) {

    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);
});

Answer 2

Вы можете попытаться использовать нотацию JavaScript Dot, поскольку 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>

Если я правильно понимаю ваш код, вы перезаписываете свои переменные.Вы можете определить свои переменные в виде массива и проходить по ним, создавая новые элементы.

Надеюсь, это подтолкнет вас в правильном направлении.

Answer 3

Использование класса в качестве селектора $('.productimg').attr('src', productImage); изменит все изображение, поскольку несколько тегов имеют одно и то же имя class , чтобы изменить изображение определенного тега, используйте id $('#'+productId ).attr('src', productImage);.

Answer 4

$('.productimg').attr('src', productImage); Эта строка кода заменит все ваши изображения последним изображением в массиве, потому что вы используете один и тот же класс для всех <img> тегов

, вместо этого используйте следующий фрагмент кода

$(image_id).attr('src', productImage);

где image_id должен быть HTML-идентификатором тега <img>