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 agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.