1

Hello I have been trying to do this for a while but the end result is always the same. The code I wrote fetches the items from a list and put them all in one row. The idea is to put 3 items per row.

$.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;
       var createRows = function () {   
            //Creates 3 Rows inside container
            var row = document.createElement("div");
            row.setAttribute('id','row' + i);
            row.classList.add('row','mb-5');

            //Appends Row to Container
            var getContainer = document.getElementById('container');
            getContainer.appendChild(row);
            console.log("Hello");   
       };

       //Creates Rows for every 3 items
       var createColumns = function(i){

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

            //Creates 3 Columns inside the 3 rows
            var columns = document.createElement("div");
            columns.setAttribute('id','columns' + i);
            columns.classList.add('col-md-4','slide-in-demo');
            columns.style.left = '0%';

            //appends the 3 columns inside the rows
            var getRow = document.getElementById('row' + j);
            getRow.appendChild(columns)

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

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

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

            //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 button to coulmns
            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'); 

            return;
       };   
    }
                 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 < items.length; i++) {
     //This loops creates Rows, Columns, H5, Images and Buttons                                             
     createColumns(i);
 }
  • Could you share the HTML generated by your code? – Thales Chemenian Feb 1 at 17:35
  • 1
    Hello @ThalesChemenian it is long but do you know if there is a way to attach an image? Basically is doing this <div id="container" class="container text-center my-5"> <div id="row0" class="row mb-5"> <div id="columns0" class="col-md-4 slide-in-demo" style="left: 0%;"> <img id="icon0" src="http://bc-net/_catalogs/masterpage/V6/img/svg/signIn.svg" style="width: 15%;"> <h5 id="header0" class="font-weight-bold my-4">People's Soft</h5> <button class="btn btn-primary btn-sm waves-effect waves-light" id="button0" href="#">LEARN MORE</button> </div> – Juan Angelogianopulos Feb 1 at 18:38
  • @ThalesChemenian the thing is that it is injecting all 9 columns in the first row – Juan Angelogianopulos Feb 1 at 18:41

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.