GetListItems - parent/child view - formatting results

Aug 19, 2014 at 10:48 AM
I am using SPServices in Sharepoint 2013 to get some results from cutom list named "navigator" presented here:


and for this purpose I am using code:
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../js/jquery.SPServices-2014.01.min.js"></script>

<script language="javascript" type="text/javascript">
$(document).ready(function() {
        operation: "GetListItems",
        async: true,
        listName: "navigator",
        CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='URL' /><FieldRef Name='DisplayOrder' /><FieldRef Name='Target' /><FieldRef Name='Category' /></ViewFields>",
        CAMLQuery: "<Query><OrderBy><FieldRef Name='DisplayOrder' Ascending='true' /></OrderBy></Query>",
        completefunc: function (xData, Status) {
            $(xData.responseXML).SPFilterNode("z:row").each(function() {
                var title = ($(this).attr("ows_Title"));
                var href = ($(this).attr("ows_URL")).split(",")[0];
                var target = ($(this).attr("ows_Target"));
                var liHtml = "<li><a href='"+ href +"' target='"+ target +"'>" + title + "</a></li>";
            <ul id="navigator" />
I get list of all items like this:


But I would like to achieve something like this:


Is it possible to use "Category" as parent for this elements? Number of elements will be greater than 1 for example 10 in each category.
Aug 20, 2014 at 2:20 AM
This is something you can do with your own markup and CSS. Right now you're just putting the items into an unordered list, as I show in many of the examples. You need to figure out what markup you want in the end, load the data into an appropriate JavaScript object, and populate the markup.