Javascript Append Function, Need to build a loop

Question

I have a .php file where I am using both HTML and JavaScript to display items from my database. I have a JavaScript append function that is creating cards where each item is display. On my cards, I have a button that will expand the card to show product history. Some products have more history than others so the expansion needs to be dynamic. The historical data is being pulled from database and is initially in a php array. I originally was going to institute php into the javascript append function but I could not figure out how to set the JavaScript index variable 'I' to my php index. So I want to just stay with JavaScript. But I don't know how to write a loop in the middle of this append function that will loop through the historical array and populate the expansion. Below is what I am attempting. I took out a lot of the lines in the append function but you can see what I am trying to do.

function get_products() {
    clear_cards();
    $.each(productNumbers, 
        function(i, value) {

            $('.main_card_shell').append(
            "<div class='card_content card_style' id='card" + i + "'>" + 
                       "<div id='card_tab2" + i + "' class='tabcontent' data-tab='tab-name2'>" +
                        "<div class='details_tables'>" +
                            "<table>" +
                                "<tr>" +
                                    "<th>Item Type</th>" +
                                    "<th>Painted</th>" +
                                    "<th>Last Sold" +
                                        "<a id='_close_tab" + i + "' class='tablinks tab_override' onclick=\"openCity(event,'card_tab4" + i + "')\">" +
                                            "<i class='large angle up icon'></i>" +
                                        "</a>" +                                                 
                                    "</th>" +
                                "</tr>" +
                                "<tr>" +
                                var itemdatesplit = itemdate[i].split("$$");
                                var itemtypesplit = itermtype[i].split("$$");
                                var itemsplit = item[i].split("$$");
                                var arraylength = itemsplit.length;
                                var counter = 0;
                                while(counter < arraylength)
                                {
                                     + "<td>" + itemtypesplit[counter] + "</td>" +
                                    + "<td>" + itemdatesplit[counter] + "</td>" +
                                    counter = counter + 1;
                                }
                                    +
                                "</tr>" +
                            "</table>" +
                        "</div>" +
                    "</div>" +

Please help. I had it working with PHP inserted in, but I just couldn't figure out how to set it to a PHP variable.

Put the loop around the append() call. You can't put statements inside an expression. — Barmar
– Barmar, Commented Mar 14, 2019 at 2:55
Actually, you should build the HTML by concatenating strings in a loop BEFORE calling append at the end of the loop. — Barmar
– Barmar, Commented Mar 14, 2019 at 2:56
Barmar, So would my string contain many <td> and <tr> because a product could have many rows in this expansion. could I use another query append for this? if so, where would I put my second append? I understand append but embedding something into it is where I am getting confused. — BEP
– BEP, Commented Mar 14, 2019 at 3:13
You do something like html = '<div>' + ...; then while(counter < arraylength) { html += '<td>' ...; }. And then finally $('.main_card_shell').append(html); — Barmar
– Barmar, Commented Mar 14, 2019 at 3:18

user6269864 · Accepted Answer · 2019-03-14 03:10:49Z

2

Place this code into a function:

function getSomething(i) {
  var html = '';
  var itemdatesplit = itemdate[i].split("$$");
  var itemtypesplit = itermtype[i].split("$$");
  var itemsplit = item[i].split("$$");
  var arraylength = itemsplit.length;
  var counter = 0;
  while(counter < arraylength) {
      html += "<td>" + itemtypesplit[counter] + "</td>";
      html += "<td>" + itemdatesplit[counter] + "</td>";
      counter = counter + 1;
  }
  return html;
}

And then use it in your HTML building block:

'<some html>' + getSomething(i) + '<some other html>'

answered Mar 14, 2019 at 3:10

user6269864

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Javascript Append Function, Need to build a loop

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related