Динамически добавлять Json данные не работают должным образом

Question

Я пытаюсь добавить путь sr c изображения, альтернативный текст и заголовок к моему html динамически через файл Jason, но каждый раз с моими данными кода повторяется, и он только обновляет последний набор значений до каждое деление.

HTML

<div class="main-products clearfix">
    <div class="col-12 col-md-6 col-lg-3">
        <div class="product-container">
            <img src="assets/images/thumbnailmobile.png">
            <h2>IPhone</h2>
        </div>
    </div>
    <div class="col-12 col-md-6 col-lg-3">
        <div class="product-container">
            <img src="assets/images/thumbnailmobile.png">
            <h2>IPhone</h2>
        </div>
    </div>
    <div class="col-12 col-md-6 col-lg-3">
        <div class="product-container">
            <img src="assets/images/thumbnailmobile.png">
            <h2>IPhone</h2>
        </div>
    </div>
    <div class="col-12 col-md-6 col-lg-3">
        <div class="product-container noty">
            <img src="assets/images/thumbnailmobile.png">
            <h2>IPhone</h2>
        </div>
    </div>
</div>

Ниже мой jquery код

$(document).ready(function() {
    $(".main-products .product-container > img").attr('src', '');
    $(".main-products .product-container h2").text("");

    var url = 'https://api.myjson.com/bins/nw3jc';
    //Populate dropdown with list of provinces
    $.getJSON(url, function (data) {
        $.each(data, function (key, entry) {
        $(".main-products .product-container").find('h2').text(entry.name);
        $(".main-products .product-container > img").attr('src', entry.path).attr('alt', entry.alt);
        });
    });
});

Как я могу ограничить одно значение в файле Json что постоянно обновляется для всех div, а не для одного значения в один div?

Ниже приведен скриншот проблемы, с которой я сталкиваюсь

Answer 1

попробуйте изменить ваш javascript следующим образом:
Может быть больше N записей в JSON, полученных из URL: https://api.myjson.com/bins/nw3jc
Итак, мы добавили проверяйте, зацикливая каждую запись, присутствующую в JSON. То, что для циклического ввода есть то же количество товарного контейнера, присутствует div или нет. Если присутствует, обновляется только источник изображения и текст H2.

$(document).ready(function() {
    $(".main-products .product-container > img").attr('src', '');
    $(".main-products .product-container h2").text("");

    var url = 'https://api.myjson.com/bins/nw3jc';
    //Populate dropdown with list of provinces
    $.getJSON(url, function (data) {
        $.each(data, function (key, entry) {
            if( typeof $(".main-products .product-container").eq(key) != 'undefined' ) {
                var product_container = $(".main-products .product-container").eq(key);
                product_container.find('h2').text(entry.name);
                product_container.find('img').attr('src', entry.path).attr('alt', entry.alt);
            }
        });
    });
});