Populate an html with list jquery

Asked

Viewed 103 times

0

this data element of jquery has a list, how to fill in html

 success: function (data) {
                    var tabela = $("#linha");
                    var rows = "";
                    $(data).each(function (i, item) {
                        rows += "<div>" + $('#imagem').attr('src', item.UrlFoto) + "</div>";
                        rows += "<div>" + $('#nome').text(item.Nome) + "</div>";
                    });
                    tabela.find().html(rows);
                },

My html

        <div class="col-lg-3 col-md-4 col-xs-6 thumb">
            <a href="#" class="fancybox" rel="ligthbox">
                <img src="" class="zoom img-fluid " alt="" id="imagem">
                <label style="color:white;text-align:center; font-size:20px" id="nome"></label>
            </a>
        </div>



    </div>

1 answer

1

You need to use .append() example of use:

var data = [{Nome:"test", Foto: "foto1"},{Nome:"test2", Foto: "foto2"},{Nome:"test3", Foto: "foto3"}];
var rows = "";
$(data).each(function (i, item) {
       rows += "<div>" + item.Nome + "</div>";
       rows += "<div>" + item.Foto + "</div>";
});
$("#linha").append(rows);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="linha">
        </div>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.