如何遍历模板文字内的数组

Question

I am trying to run a loop inside some template literal code, inside a modal.

So, the result of an Ajax request... I have shortened all the code to keep the line count down.

    .done(function (data) {
        var itemsList = $.each(data, function (index, item) {
            '<p>' + item.prod_name + '<p>';
        });

Again, shortened modal code.

     var modal = `<div class="modal-body">`
       + itemsList +
     `</div>`;

All that is outputted is [object object] but if I console.log my data then I get back the proper data.

Answer 1

You need to turn the array into a string:

 data=[{prod_name:1},{prod_name:2}]; var itemsList = $.map(data, function (item, index) { return '<p>' + item.prod_name + '<p>'; }).join(''); console.log(itemsList);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

Please use var modal = "<div class="modal-body">" +JSON.stringify(itemList) +"</div>";

JSON.stringify(itemList) would give you the data inside the object.