API call or JS function to get a list of categories and URL's

<baris>

It is an array so you should be able to do this.children.forEach(child => console.log(child));

phenomlab

Thanks. I'll need to find a way of getting this referenced as an object so I can call it.

phenomlab

@baris said in API call or JS function to get a list of categories and URL's:

this.children.forEach(child => console.log(child))

This is odd..

$(document).ready(function() {
    //var categorylist = "";
    $.getJSON('/api/categories', function(data, status) {
        $.each(data.categories, function(key, value) {
            //console.log("Category name =  " + this.name + " | URL = " + this.slug + " | Children = " + this.children.forEach(child => child));
            var categorylist = $(" \
            <li><a class='dropdown-item rounded-1' href='/category/" + this.slug + "'>" + this.name + "</a></li> \
                <ul> \
      <li><a class='dropdown-item rounded-1' href='/category/" + this.children.forEach(child => (child.slug)) + "'>" + this.children.forEach(child => (child.name)) + "</a></li> \
    </ul> \
        ");
            $("#thecategories").append(categorylist);
        });
    });
});

If I use console.log then console.log(child.slug)) works, but the value isn't being collected to build the li items

Console Log

6/customisation
24/guides
9/networks
10/performance
22/labs
21/learning
7/linux
15/windows
26/development
12/malware
3/privacy
14/vulnerability

<baris>

You want to output one li item for each child so you need to move the loop outside. Something like this

var categorylist = $(" \
	<li><a class='dropdown-item rounded-1' href='/category/" + this.slug + "'>" + this.name + "</a></li> \
		<ul>" + 
		this.children.map(c => `<li><a class='dropdown-item rounded-1' href='/category/" + ${c.slug} + "'>" + ${c.name}) + "</a></li>`) +
		"</ul>"
	);

So for each child category in the children array it will create a li element

phenomlab

@baris Of course! Yes - thanks for this. Will change as required.

phenomlab

@baris sorted - thanks

$(document).ready(function() {
    //var categorylist = "";
    $.getJSON('/api/categories', function(data, status) {
        $.each(data.categories, function(key, value) {
            //console.log("Category name =  " + this.name + " | URL = " + this.slug + " | Children = " + this.children.forEach(child => child));
var categorylist = $(" \
	<li><a class='dropdown-item rounded-1' href='/category/" + this.slug + "'>" + this.name + "</a></li> \
		<ul>" + 
		this.children.map(c => `<li><a class='dropdown-item rounded-1' href='/category/${c.slug}'>${c.name}</a></li>`).join(" ") +
		"</ul>" 
	);
            $("#thecategories").append(categorylist);
        });
    });
});

Added join(" "); to strip the commas from the array

phenomlab

More complete code, prettified...

$(document).ready(function() {
    //var categorylist = "";
    $.getJSON('/api/categories', function(data, status) {
        $.each(data.categories, function(key, value) {
            var categorylist = $(" \
	<li><span class='category-menu'><i class='fal " + this.icon + "'></i><a style='display: inherit;' class='dropdown-item rounded-1' href='/category/" + this.slug + "'>" + this.name + "</a></span></li> \
		<ul style='list-style: none;'>" +
                this.children.map(c => `<li><span class='category-menu'><i class='fal ${c.icon}'></i><a class='dropdown-item rounded-1' style='display: inherit;' href='/category/${c.slug}'>${c.name}</a></span></li>`).join(" ") +
                "</ul><li class='dropdown-divider'></li>"
            );
            $("#thecategories").append(categorylist);
        });
    });
});

Looks like this

phenomlab

@baris one thing that puzzles me is that whilst the newly created menu is dynamically built, and displays fine on desktop, it doesn't show on mobile - apart from the one li I added in the navigation pane, which I am using with an id to bind the dynamically built lines.

Any thoughts ?

Thanks

<baris>

Since you are using an id it's only selecting one of the elements. Try a more specific selector like:

$(".sidebar-left #thecategories").append(categorylist);
$(".bottombar #thecategories").append(categorylist);

phenomlab

@baris good idea. Thanks. I'll try that.

PitaJ

Generally having more than one element with the same id is not advisable and you should use a class instead.

phenomlab

@PitaJ Agree, although in this instance, I'm able to fire one or the other dependant on viewport

$(document).ready(function() {
    //var categorylist = "";
    $.getJSON('/api/categories', function(data, status) {
        $.each(data.categories, function(key, value) {
            var categorylist = $(" \
	<li><span class='category-menu'><i class='fal " + this.icon + "'></i><a style='display: inherit;' class='dropdown-item rounded-1' href='/category/" + this.slug + "'>" + this.name + "</a></span></li> \
		<ul style='list-style: none;'>" +
                this.children.map(c => `<li><span class='category-menu'><i class='fal ${c.icon}'></i><a class='dropdown-item rounded-1' style='display: inherit;' href='/category/${c.slug}'>${c.name}</a></span></li>`).join(" ") +
                "</ul><li class='dropdown-divider'></li>"
            );
            if ($(window).width() < 767) {
                $(".bottombar #thecategories").append(categorylist);
            } else {
                $(".sidebar-left #thecategories").append(categorylist);
            }
        });
    });
});

phenomlab

Ok, I've spent WAY too much time on this already, but I'm really quite happy with how this turned out

If anyone wants to know how this it put together, it's all documented here
https://sudonix.com/topic/457/create-a-dynamic-category-list

julian

@phenomlab okay, now that is cool.

phenomlab

@julian Thanks !