Push subheading to the bottom and hide on single array value

So I'm getting some data from an API and then I'm structuring my columns and rows dynamically, but I'm stuck on two things that I wanted to see if anyone can assist me on. So here are the things that I'm attempting to achieve:

  1. Always have the "Other" data at the end, so if we have subheadings in the object, always display the "other" array at the end.

  2. If we have no other subheadings except "Other", don't output the <h3> markup that is being called.

Please click on the run snippet below to execute some dummy data and to see if you can help me. Also, if you have a better way to restructure the HTML and utilize result better, please let me know.


So here is the code to gets the data from the API:

// Define the array
var data = data.d.results;

// Initialize output
var result = {};

// Loop through all the data
for (var i = 0; i < data.length; i++) {

  // Retrieve values
  var cat = data[i].Category;
  var sub = data[i].Subheading;

  // Check empty subheading condition
  if (!sub || sub == "") sub = "Other";

  // Initialize objects
  if (result[cat] === undefined) result[cat] = {}; // Empty object
  if (result[cat][sub] == undefined) result[cat][sub] = []; // Empty array

  // Insert element at the position defined by Category on the
  // first layer object, and defined by Subheading on the second layer array
  result[cat][sub].push(data[i]);
}
console.log(result);

This is the structured return on result: enter image description here


Then I'm building up my HTML items and outputting the HTML on the main page using the below code:

    var html = '<hr size="1" style="margin:24px 0;">';
    $.each(result, function(category, value) {
    var catslug = category.toString().trim().toLowerCase().replace(/\s+/g, "-").replace(/[^\w\-]+/g, "").replace(/\-\-+/g, "-").replace(/^-+/, "").replace(/-+$/, "");
        html += '<div id="edge-' + catslug + '" class="col-sm-12 col-md-12 col-lg-4">';
        html += '<h2 class="edge-title">' + category + '</h2>';
        $.each(value, function(subHeading, val) {
        var subheadslug = subHeading.toString().trim().toLowerCase().replace(/\s+/g, "-").replace(/[^\w\-]+/g, "").replace(/\-\-+/g, "-").replace(/^-+/, "").replace(/-+$/, "");
            html += '<div id="edge-' + subheadslug + '">';
            html += '<h3 class="edge-subtitle">' + subHeading + '</h3>';
            for (var i = 0; i < val.length; i++) {
                html += '<div class="' + catslug + '" id="'+ catslug + val[i].ID +'"><h3><a data-toggle="modal" data-target="#Modal_"'+ object[i].ID +'">' + val[i].Title + '</a></h3><span>' + val[i].Description + '</span></div>';
            }
            html += '</div>';
        });
        html += '</div>';
    });
    $("#edge-all-programs").append(html);

This is how it outputs:

enter image description here

Even with me having "Great Relationships", "Manager Fundamentals" and "Other", the "Other" doesn't output at the end and is in the middle.

// Define the array
var data = [
    length: 6,
    0: {
        Category: "Leadership & Personal Eeffectiveness",
        Description: "This is description 00",
        ID: 29,
        Subheading: "Manager Fundamentals",
        Title: "Your Impact on Others"
    },
    1: {
        Category: "Commercial Acumen",
        Description: "This is description 01",
        ID: 22,
        Subheading: "Driving High Performance",
        Title: "True Grit"
    },
    2: {
        Category: "Leadership & Personal Eeffectiveness",
        Description: "This is description 02",
        ID: 23,
        Subheading: "Manager Fundamentals",
        Title: "U-turn Performance"
    },
    3: {
        Category: "Leadership & Personal Eeffectiveness",
        Description: "This is description 03",
        ID: 24,
        Subheading: null,
        Title: "Conflict Detox"
    },
    4: {
        Category: "Value Proposition Expertise",
        Description: "This is description 04",
        ID: 84,
        Subheading: null,
        Title: "Data Tech NewsWhip"
    },
    5: {
        Category: "Value Proposition Expertise",
        Description: "This is description 05",
        ID: 72,
        Subheading: "Other",
        Title: "Data Tech News and Opinions"
    }
];

// Initialize output
var result = {};

// Loop through all the data
for (var i = 0; i < data.length; i++) {

    // Retrieve values
    var cat = data[i].Category;
    var sub = data[i].Subheading;

    // Check empty subheading condition
    if (!sub || sub == "") sub = "Other";

    // Initialize objects
    if (result[cat] === undefined) result[cat] = {}; // Empty object
    if (result[cat][sub] == undefined) result[cat][sub] = []; // Empty array

    // Insert element at the position defined by Category on the
    // first layer object, and defined by Subheading on the second layer array
    result[cat][sub].push(data[i]);
}
console.log(result);

var html = '<hr size="1" style="margin:24px 0;">';
$.each(result, function(category, value) {
    var catslug = category.toString().trim().toLowerCase().replace(/\s+/g, "-").replace(/[^\w\-]+/g, "").replace(/\-\-+/g, "-").replace(/^-+/, "").replace(/-+$/, "");
    html += '<div id="edge-' + catslug + '" class="col-sm-12 col-md-12 col-lg-4">';
    html += '<h2 class="edge-title">' + category + '</h2>';
    $.each(value, function(subHeading, val) {
        var subheadslug = subHeading.toString().trim().toLowerCase().replace(/\s+/g, "-").replace(/[^\w\-]+/g, "").replace(/\-\-+/g, "-").replace(/^-+/, "").replace(/-+$/, "");
        html += '<div id="edge-' + subheadslug + '">';
        html += '<h3 class="edge-subtitle">' + subHeading + '</h3>';
        for (var i = 0; i < val.length; i++) {
            html += '<div class="' + catslug + '" id="' + catslug + val[i].ID + '"><h3><a data-toggle="modal" data-target="#Modal_"' + val[i].ID + '">' + val[i].Title + '</a></h3><span>' + val[i].Description + '</span></div>';
        }
        html += '</div>';
    });
    html += '</div>';
});
$("#edge-all-programs").append(html);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="edge-all-programs" class="row"></div>



Read more here: https://stackoverflow.com/questions/68463047/push-subheading-to-the-bottom-and-hide-on-single-array-value

Content Attribution

This content was originally published by DevSem at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: