Creating rows,columns in vanilla JS

Hello I am trying to create 3 columns inside 3 rows. The columns have 1 image, 1 title and a button pulled from a database. The code I wrote is creating 9 rows and each row has 3 columns and it is only injecting the first 3 items of the list instead of 9. I am attaching 2 screenshots the one named newCode is the code I wrote and the one named homePage is the one I created using html and css.

$.ajax({
            url: "http://bc-net/Sandbox/juandev/_api/web/lists/GetByTitle('Qlinks')/items",
            method: "GET",
            headers: {
                "Accept": "application/json; odata=verbose"
            },
            success: function(data) {
                var items = data.d.results;


                if (items.length > 0) {
                    //Creates Container
                    var container = document.createElement("div");
                    container.setAttribute('id', 'container');
                    container.classList.add('container', 'text-center', 'my-5');

                    //Gets Section in DOM
                    var getSection = document.getElementById('services');
                    getSection.appendChild(container);

                    for (var i = 0; i < 3; i++) {

                        function createRows(i) {

                            //Creates Rows inside container
                            var row = document.createElement("div");
                            row.setAttribute('id', 'row' + i);
                            row.classList.add('row', 'mb-5');

                            //Appends Row to Container
                            var getSection = document.getElementById('container');
                            getSection.appendChild(row);

                            for (var j = 0; j < 3; j++) {

                                function createColumns() {

                                    ![homePage | 690 x466](upload: //4qojT4q6bs7nDnxlc3CUWSqDsDr.png) ![newCode|690x341](upload://2WM4LaXwyF8AcJ99Ulvqpjxq0e7.jpeg) //Creates Columns inside rows
                                        var columns = document.createElement("div"); columns.setAttribute('id', 'columns' + j); columns.classList.add('col-md-4', 'slide-in-demo'); columns.style.left = '0%';

                                        //appends columns inside the rows
                                        var getRow = document.getElementById('row' + i); getRow.appendChild(columns); console.log(getRow);

                                    }; //End of createColumns function

                                    createColumns();

                                }; // End of j loop

                                for (var k = 0; k < 3; k++) {

                                    function createIcons(k) {
                                        //Pulls the images from the list
                                        var icon = document.createElement("img");
                                        icon.setAttribute('id', 'icon' + k);
                                        icon.style.width = '15%';
                                        icon.src = items[i].IconImage1.Url;

                                        //Pulls header from the list
                                        var header = document.createElement("h5");
                                        header.setAttribute('id', 'header' + k);
                                        header.innerHTML = items[i].Title;
                                        header.classList.add("font-weight-bold", "my-4");

                                        //Creates buttons
                                        var button = document.createElement("button");
                                        button.classList.add('btn', 'btn-primary', 'btn-sm', 'waves-effect', 'waves-light');
                                        button.setAttribute('id', 'button' + i);
                                        button.setAttribute('href', '#');

                                        //Appends elements columns
                                        var getColumns = document.getElementById('columns' + i);
                                        getColumns.appendChild(icon);
                                        getColumns.appendChild(header);
                                        getColumns.appendChild(button);

                                        var txt = document.createTextNode('LEARN MORE');

                                        var getButton = document.getElementById('button' + i);
                                        getButton.appendChild(txt);

                                        /*var para = document.createElement("p");
                                        para.classList.add('grey-text', 'mb-md-0', 'mb-5');*/


                                    }; //End of createIcons function

                                }; //End of k Loop

                                createIcons(i);

                            }; //End of createRows function


                            createRows(i);

                        }; //End of i Loop

                    }; //End of if statement

                },
                error: function(data) {
                    alert("Error: " + data);
                }
            }); //End Service Icons

So there are many, many things going on in here that should be reconsidered and reorganized.

  • function createColumn() and function createIcons() should be defined outside the $.ajax() call – why redefine them on every loop iteration?

  • When I moved those two out to test (I set up a sandbox env, with HTML as close to what your code is looking for as I can understand), there is a line that is throwing an ugly error. What is your intent behind the following line?

      ![homePage | 690 x466](upload: //4qojT4q6bs7nDnxlc3CUWSqDsDr.png) ![newCode|690x341](upload://2WM4LaXwyF8AcJ99Ulvqpjxq0e7.jpeg) //Creates Columns inside rows

hello @snowmonkey thanks for replying. It looks like the line you mentioned

  • ![homePage | 690 x466](upload: //4qojT4q6bs7nDnxlc3CUWSqDsDr.png) ![newCode|690x341](upload://2WM4LaXwyF8AcJ99Ulvqpjxq0e7.jpeg) //Creates Columns inside rows
    
is just some screenshots I uploaded. Is not in the code I created.

This is the HTML code

<section style=" padding-bottom:1em;" >
            <div class="container text-center my-5">
                <!-- Section heading -->
                <!-- Grid row -->
                <div class="container" style="overflow:hidden">
                    <div class="row mb-5">
                        <!-- Grid column -->
                        <div class="col-md-4 slide-in-demo">
                            <i class="fal fa-sign-in-alt fa-3x black-text">
                            </i>
                            <h5 class="font-weight-bold my-4">People's Soft</h5>
                            <p class="grey-text mb-md-0 mb-5">
                            </p>
                            <a class="btn btn-primary btn-sm" href="#" target="_blank">Learn more</a>
                        </div>
                        <!-- Grid column -->
                        <div class="col-md-4 slide-in-demo">
                            <i class="fal fa-dollar-sign fa-3x green-text">
                            </i>
                            <h5 class="font-weight-bold my-4">ePay Statement</h5>
                            <p class="grey-text mb-md-0 mb-5">
                            </p>
                            <a class="btn btn-primary btn-sm" href="#" target="_blank">Learn more</a>
                        </div>
                        <!-- Grid column -->
                        <!-- Grid column -->
                        <div class="col-md-4 slide-in-demo">
                            <i class="fal fa-graduation-cap fa-3x cyan-text">
                            </i>
                            <h5 class="font-weight-bold my-4">Learning</h5>
                            <p class="grey-text mb-md-0 mb-5">
                            </p>
                            <a class="btn btn-primary btn-sm" href="#" target="">Learn more</a>
                        </div>
                        <!-- Grid column -->
                    </div>
                    <!-- End Row -->
                    <!-- Grid column -->
                    <div class="row mb-5">
                        <div class="col-md-4 slide-in-demo">
                            <i class="fal fa-users fa-3x red-text">
                            </i>
                            <h5 class="font-weight-bold my-4">Promotional Opportunities</h5>
                            <p class="grey-text mb-0">
                            </p>
                            <a class="btn btn-primary btn-sm" href="#" target="_blank">Learn more</a>
                        </div>
                        <!-- Grid column -->
                        <!-- Grid column -->
                        <div class="col-md-4 slide-in-demo">
                            <i class="fal fa-clock fa-3x blue-text">
                            </i>
                            <h5 class="font-weight-bold my-4">Time and Attendance</h5>
                            <p class="grey-text mb-0">
                            </p>
                            <a class="btn btn-primary btn-sm" href="#" target="_blank">Learn more</a>
                        </div>
                        <!-- Grid column -->
                        <!-- Grid column -->
                        <div class="col-md-4 slide-in-demo">
                            <i class="fal fa-money-bill-wave fa-3x green-text">
                            </i>
                            <h5 class="font-weight-bold my-4">Discounts</h5>
                            <div id="counter">22</div>
                            <p class="grey-text mb-0">
                            </p>
                            <a href="http://bc-net/offers/Pages/default.aspx" class="btn btn-primary btn-sm">Learn more</a>
                        </div>
                        <!-- Grid column -->
                    </div>
                    <!-- Grid row -->
                    <div class="row">
                        <div class="col-md-4 slide-in-demo">
                            <i class="fal fa-handshake-alt fa-3x amber-text">
                            </i>
                            <h5 class="font-weight-bold my-4">Swap Meet</h5>
                            <div id="counter">22</div>

                            <p class="grey-text mb-0">
                            </p>
                            <a class="btn btn-primary btn-sm" href="#" target="">Learn more</a>
                        </div>
                        <!-- Grid column -->
                        <!-- Grid column -->
                        <div class="col-md-4 slide-in-demo">
                            <i class="fal fa-calendar-check fa-3x blue-grey-text"></i>
                            
                            <h5 class="font-weight-bold my-4">Events Calendar</h5>
                            <p class="grey-text mb-0">
                            </p>
                            <a class="btn btn-primary btn-sm" href="#" target="_blank">Learn more</a>
                        </div>
                        <!-- Grid column -->
                        <!-- Grid column -->
                        <div class="col-md-4 slide-in-demo">
                            <i class="fal fa-coffee fa-3x black-text"></i>
                            
                            <h5 class="font-weight-bold my-4">Cafeteria Menu</h5>
                            <p class="grey-text mb-0">
                            </p>
                            <a class="btn btn-primary btn-sm" href="#" target="">Learn more </a>
                        </div>
                        <!-- Grid column -->
                    </div>
                </div>
                </div>
            </section>
            <!-- Section: Features v.1 -->

So, as I said, you should really consider moving the creation of those functions outside of the loops. I’ve made a codepen where I pulled each of them out, and changed the parameter references accordingly.

  • createRow(rowIndex) – within the $.ajax(...), you still pass the parameter like this: createRow(i), but within the function definition, I’m calling that i by a different name. First, it clearly says what that parameter is, and second, I want to make sure it’s a complete break from the local variable within your loop.
  • createColumn(rowIndex, columnIndex) – same thing. Within the createRow(...), I can still call this using createColumn(rowIndex, j) as you use j for your loop variable, but within itself, createColumn sees j as columnIndex.
  • createIcons(rowIndex, columnIndex, iconIndex) – this function AND function call should be moved. You refer, within the createIcons(...), to the column’s index (j), but outside of the loop that creates the columns, that variable is undefined. If you need to refer to the column index, then the createIcons(...) should be called within the createColumn(...). And the naming scheme within the function applies – rowIndex rather than i, columnIndex rather than j, and iconIndex rather than k. Your loop variables are fine, but the functions themselves shouldn’t know about them. They should just get a parameter.

All that said, I can’t access your JSON data, so it’s all theoretical. Here’s the pen if it helps at all: https://codepen.io/snowmonkey/pen/BMdaOO?editors=0010

Thank you @snowmonkey I will try that code and will let you know what the result is!

Not to be a total jerk, but make sure you understand the reasoning behind why I did what I did – if you have questions, please ask, whether here or by PM.

I sure will I will read the codepen code and if I have any questions I will send you a message!

Hi @snowmonkey I read the code and I understand the logic behind it. For some reason it gives me an error (createRows is not defined) I think it is because the function createRows is out of the scope. Any thoughts on that?