0

Attached image

enter image description here

Has my SharePoint list data and the output which I want to achieve. Can you please help me to create the structure which is in the Image Dynamically Also Next time when I try to add a new item it should come under the same category. Can you please help me to genrate the HTML table or by using DIV & LI tags and assign the same dynamically.

Here is my script where I am using SPservices to fetch the data.

<script type="text/javascript" src="../SiteAssets/jquery.min.js"></script>
<script type="text/javascript" src="../SiteAssets/jquery.SPServices.min.js"></script>


 <script type="text/javascript">


//this is where the script starts after the page is loaded
$(document).ready(function() { 

    GetData();

});

function GetData()
{

        var method = "GetListItems";            
        var list = "ResourceList"
        var fieldsToRead =     "<ViewFields>" +
                                "<FieldRef Name='Title' />" +
                                "<FieldRef Name='URL' />" +
                                "<FieldRef Name='Category' />" +            
                            "</ViewFields>";                                   
        var query = "<Query>" +
                        "<Where>" +
                            "<Neq>" +
                                "<FieldRef Name='ID'/><Value Type='Number'>0</Value>" + 
                            "</Neq>" +
                        "</Where>" +
                        "<OrderBy>" + 
                            "<FieldRef Name='Category'/>" +
                        "</OrderBy>" +
                    "</Query>";

    var clientData = {};

    var liHtml="";
    var html="";


        $().SPServices({
                operation: method,
                async: false,  
                listName: list,
                CAMLViewFields: fieldsToRead,
                  CAMLQuery: query,

                    completefunc: function (xData, Status) { 

                        $(xData.responseXML).SPFilterNode("z:row").each(function() {                                                                                                                                                                      
                            var Url = ($(this).attr("ows_URL")).split(",")[0];
                            var UrlDesc=($(this).attr("ows_URL")).split(",")[1];                                                        
                            var Category = ($(this).attr("ows_Category"));
                            if(clientData.hasOwnProperty(Category)){
                                clientData[Category] = clientData[Category] + "," + Url + "#" +UrlDesc;                               
                            } 
                            else 
                            {
                                clientData[Category] = Url + "#" +UrlDesc;
                            } 


                        });

                        console.log(clientData);
                     for (var category in clientData)
                     {
                         var category_attr;
                         category_attr = clientData[category];
                         category_attr = category_attr.split(",");

                          html = "<ul>" + category.trim() + "</ul>";
                         for(var i=0; i<category_attr.length; i++)
                         {
                             var temp = category_attr[i].split("#");
                             var url = temp[0].trim();
                             var urldesc = temp[1].trim();
                              liHtml += "<li>"+
                                     "<a href='" +url +"'>"+urldesc+""+"</a>"+
                                  "</li>";  
                         }
                         html = html + liHtml;
                         $("#tasksUL").append(html);
                     }
                       //$("#tasksUL").append(html); 
                    }
        });

}
</script>
<div id="tasksUL" ></div>

I made some progress and i was able to assign it to UL and LI tags.
MY ORGINAL VIEW
enter image description here
OUTPUT OF THE CODE
enter image description here
But the problem is when i try to loop through the array object the previous LI values get's appended to the next LI values. Basically i am poor in UI so i was unable to get the Format which i have posted earlier. Any UI specialist help me on achieving this.

My array object clientdata is returning like this

Object { AUSTRALIA: "http://au.com# AU,http://mcg.com# MCG", INDIA: "http://kp.com# KP,http://ap.com# AP,http://tg.com# TG", PAKISTAN: "http://PK.COM# PK,http://POL# POL", USA: "http://UU# UU,http://PHL.com# PHL" }


CLIENT DATA OBJECT DURING DEBUG
enter image description here

  • 1
    hi sandy143 did you tried to solve your query? I am looking for the same rather...! – SPLearner Mar 11 '15 at 16:58
0

Here is the Full code how i have achieved this.

<script type="text/javascript">


//this is where the script starts after the page is loaded
$(document).ready(function() { 

    GetData();

});
/*MAIN FUNCTION TO READ THE LIST ITEMS FROM TEH LIST USING SPSERVICES*/
function GetData()
{

        var method = "GetListItems";            
        var list = "ResourceList"
        var fieldsToRead =     "<ViewFields>" +
                                "<FieldRef Name='Title' />" +
                                "<FieldRef Name='URL' />" +
                                "<FieldRef Name='Category' />" +            
                            "</ViewFields>";                                   
        var query = "<Query>" +
                        "<Where>" +
                            "<Neq>" +
                                "<FieldRef Name='ID'/><Value Type='Number'>0</Value>" + 
                            "</Neq>" +
                        "</Where>" +
                        "<OrderBy>" + 
                            "<FieldRef Name='Category'/>" +
                        "</OrderBy>" +
                    "</Query>";

    var clientData = {};   
    var liHtml="";
    var html="";


        $().SPServices({
                operation: method,
                async: false,  
                listName: list,
                CAMLViewFields: fieldsToRead,
                  CAMLQuery: query,

                    completefunc: function (xData, Status) { 

                        $(xData.responseXML).SPFilterNode("z:row").each(function() {                                                                                                                                                                      
                            var Url = ($(this).attr("ows_URL")).split(",")[0];
                            var UrlDesc=($(this).attr("ows_URL")).split(",")[1];                                                        
                            var Category = ($(this).attr("ows_Category"));
                            if(clientData.hasOwnProperty(Category)){
                                clientData[Category] = clientData[Category] + "," + Url + "#" +UrlDesc;                               
                            } 
                            else 
                            {
                                clientData[Category] = Url + "#" +UrlDesc;
                            } 


                        });
                      //  console.log(clientData);



                     for (var category in clientData)
                     {
                         var category_attr = [];
                        // console.log(category);
                         category_attr = clientData[category];
                         category_attr = category_attr.split(",");
                        // console.log(category_attr);
                          html = "<div style='float: left'><ul><li class='list-view'>" + category.trim() + "</li>";
                         liHtml = "";
                         for(var i=0; i<category_attr.length; i++)
                         {
                             var temp = category_attr[i].split("#");
                             var url = temp[0].trim();
                             var urldesc = temp[1].trim();
                              liHtml += "<li>"+
                                     "<a href='" +url +"'>"+urldesc+""+"</a>"+
                                  "</li>";  
                         }
                         html = html + liHtml + "</ul></div>";
                         $("#tasksUL").append(html);
                     }

                    }
        });

}
</script>
<style type="text/css" >    
#tasksUL ul{  width:350px;  }
#tasksUL ul li{ list-style: inside none square !important; padding-left:10px !important;   }
.list-view { background: #005898 !important; padding:2px; color:#FFF !important;   }
</style>
<div id="tasksUL" ></div>
  • This section is for answers only, please add this to your questions body instead – Robert Lindgren Mar 12 '15 at 6:05
  • Robert i tried posting it in question section due to space constraint i have posted it here . – santosh kondapalli Mar 12 '15 at 6:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.