CODEWITHSUNDEEP
jqueryjson
Abhilash Poojary
Abhilash Poojary

Reputation: 127

Dynamically append Json data not working properly

I am trying to add image src path,alt text and heading to my html dynamically through the Jason file, But each time with my code data is repeating and it is only updating the last set of value to each divs.

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>

Below is my jquery code

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

How can i restrict the one value in the Json file which is keep getting updated to all divs rather than one values to one divs?

Below is the screenshot of the issue which I am facingenter image description here

Upvotes: 0

Views: 346

Answers (1)

Prasad Wargad
Prasad Wargad

Reputation: 765

try modifying your javascript the below way:
There may be more N number of entries present in JSON retrieved from URL: https://api.myjson.com/bins/nw3jc
So we have added a check, while looping each entry present in JSON. That for looping entry is there same number of product container div is present or not. If present then only updating image source & H2 text.

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

Upvotes: 1

Related Questions