none
Javascript iterate over array RRS feed

  • Question

  • I'm trying to group items in an array. I have the items I want grouped, but I don't exactly know how to pull them back out.  Like iterate through all the items and get them on the page.

    I've got another thread with screenshots of what I'm trying to do.  https://social.technet.microsoft.com/Forums/en-US/05896606-211d-4494-82ab-e8a30f5bdce2/group-items-in-a-template-override?forum=sharepointdevelopment

    So I've grouped my items using code like this:

    (function () {
        var overrideCtx = {};
         overrideCtx.Templates = {};
         overrideCtx.Templates.Header = HeaderOverrideFun;
         overrideCtx.Templates.Item = ItemOverrideFun;
         overrideCtx.OnPostRender = OnPostRenderHandler;
         SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
     })();
    
    function HeaderOverrideFun(ctx) {
      var header = '<div style="width:40%;border-style:double;float:left">Category1<ul id="Category1"></ul></div>'
          header += '<div style="width:40%;border-style:double;float:left"><div style="border-style:dotted">Category2<ul id="Category2"></ul></div>'
          header += '<div style="border-style:dotted">Category3<ul id="Category3"></ul></div></div>'
        return header
      }
    
    
    function ItemOverrideFun(ctx) {
      var item = '<li id="link_item' + ctx.CurrentItem.ID + '"><a href=\"' + ctx.CurrentItem.URL + '\" target=\"_blank\">' + ctx.CurrentItem['URL.desc'] + '</a><br>';
          item += ctx.CurrentItem['Comments'] + '</li>'
        return item
        //return '<li><a href=\"' + ctx.CurrentItem.URL + '\" target=\"_blank\">' + ctx.CurrentItem['Categories'] + '</a></li>';
        //return '<li><a href=\"' + ctx.CurrentItem.URL + '\" target=\"_blank\">' + ctx.CurrentItem['SubCategory'] + '</a></li>';
        //return '<li><a href=\"' + ctx.CurrentItem.URL + '\" target=\"_blank\">' + ctx.CurrentItem['SubCategory'] + myView + '</a></li>';
    }
    
    function FooterOverrideFun(ctx) {
        return '</ul> <h6> ' + ctx.ListTitle + '</h6> </div>'
        
        
      }
    
    function OnPostRenderHandler(ctx){
      var rows = ctx.ListData.Row;
      
      var categories = groupBy(rows, "Categories");
      var subcategories = groupBy(rows, "SubCategory");
      var groupings = groupBy(categories,subcategories);
        
        groupings.forEach(function(link){
            
            console.log(link);
            
        });
    
      /*
      //Attach to category
      for (var i = 0; i < rows.length; i++) {
        
           //var category = rows[i]["Category"];
          var category = rows[i]['Categories'];
            if (category == 'Category1') {
              var itemID = '#link_item' + rows[i]['ID'];
              $(itemID).appendTo($('#Category1'));
              //  debugger;
            }
            if (category == 'Category2') {
              var itemID = '#link_item' + rows[i]['ID'];
              $(itemID).appendTo($('#Category2'));
            }
            if (category == 'Category3') {
              var itemID = '#link_item' + rows[i]['ID'];
              $(itemID).appendTo($('#Category3'));
            } 
       // debugger;
      }
     */ 
    }
    
    function groupBy(collection, property) {
        var i = 0, val, index,
            values = [], result = [];
        for (; i < collection.length; i++) {
            val = collection[i][property];
            index = values.indexOf(val);
            if (index > -1)
                result[index].push(collection[i]);
            else {
                values.push(val);
                result.push([collection[i]]);
            }
        }
        return result;
    }

    I've commented out the working code in my 'OnPostRenderHandler' because I'm trying to understand how to get all the items out of the array.  It's an array of arrays.

    I guess what I'm asking is how can I get the items to match the 'Category' first, then automatically just put itself in the subcategory, then finally the item.


    David Jenkins

    Monday, February 13, 2017 4:35 PM

Answers

  • Hi David,

    Not see the complete rows array data, but for the index of the array, it will begin from 0 and end with rows.length - 1 like below, make sure all the value is valid using console.log, then append the value after specific div using Jquery:

    <script type="text/javascript">
    var rows = [ {ID: "1", Category: "Category1"},
                         {ID: "2", Category: "Category2"},
                         {ID: "3", Category: "Category3"}];
    for (var i = 0; i < rows.length -1; i++) {
        
          var category = rows[i]["Category"];
            if (category == 'Category1') {
              var itemID = '#link_item' + rows[i]['ID'];
    		  console.log(itemID);
              $(itemID).appendTo($('#Category1'));
            }
            if (category == 'Category2') {
              var itemID = '#link_item' + rows[i]['ID'];
              console.log(itemID);
              $(itemID).appendTo($('#Category2'));
            }
            if (category == 'Category3') {
              var itemID = '#link_item' + rows[i]['ID'];
              console.log(itemID);
              $(itemID).appendTo($('#Category3'));
            } 
            }
    	</script>

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Tuesday, February 14, 2017 7:58 AM