How to do the simplest thing...get the category id of a topic

(Steven Slade) #1

What I need: Using javascript, I need the category_id (and eventually Category name) of the current Topic.

If it were in Rails: If I was doing this in Rails land, it would look something like this assuming we are in the Topics Controller…Category.where(id: self.category_id)

What I tried in Ember:
TopicController.reopen({ getCategoryId: function() { console.log(this.get('category_id'); } });

I feel a bit silly, I’m sure it is very easy to get the category_id and consequently that Categories names of a particular Topic…but I can’t seem to grasp this.

(Sam Saffron) #2

From the controller have you tried:


(Steven Slade) #3

I don’t get an error but the console log also doesn’t run either.


Version v1.5.0.beta10 +34

This runs ok on the client (custom css/html/js) and will extract category id and name when a topic is rendered.

var topicView =  require('discourse/views/topic').default;

      didInsertElement : function(){
        this._super();'afterRender', this, this.afterRenderEvent);
      afterRenderEvent : function(){
        //console.dir(this);  //Use this to to get a good overview of what's available
        console.dir("Category ID: " + + " - Category Name: "  +;

(Steven Slade) #5

Hey, thanks so much for this. It works great. Please don’t feel obligated to follow up on this, but if it isn’t too much trouble, would you mind walking me through how this code works? I am new to Ember :sadpanda:


Glad it worked for you.

My solution is a bit of a hack and there’s probably a much better way of doing this. But in lieu of that, here goes.

I start by looking at the View Tree in the Ember Inspector plug in:

and when I mouseover each view, the corresponding view on the web page is shown

Having selected the view you (think you) need it's a case of building the query and you start by getting a reference to the view.

var topicView = require('discourse/views/topic').default;

And then we can modify the view as needed:


In this case we add an event handler for the view afterRenderEvent:

 afterRenderEvent : function(){
        //console.dir(this);  //Use this to to get a good overview of what's available
        console.dir("Category ID: " + + " - Category Name: "  +;

which is then called when the view has been rendered on the page. There may well be other events that we can hook into too given the example above only runs after the view renders - but I think this is ok given you only know what topic you want once it’s on the page in front of you (assuming you aren’t looking at a list of topics).

As to how I found the properties I needed, I first (which is not in the code above) interrogated the view object inside the afterRenderEvent using:

console.dir (this)

Which enables you to look at the view object…, like this:

And from here you can indulge yourself to your heart’s content.

Note, if you also want the parent category (if exists) then that’s there too.

Hope that helps.

Edit: i should have added that a good place to start would be the Ember website. There’s plenty of examples there which you can extrapolate from. Plus you might find the Ember Inspector useful too:

(Steven Slade) #7

While you were deep into the Topic view, you didn’t happen to see any hooks that could be used that would give the data before the page renders, did you? I need the category name of the topic set as a variable before the page renders.


Topic rendering is about to change - best to wait 'til that surfaces before investigating further.

(Allen - Watchman Monitoring) #9

I just needed to do this… I went to /categories in my Discourse, then typed .json after that & viewed the list

Do to that here on Meta, it would be:

Then find the category in question… the ID will be close by.

(Steven Slade) #10

Thanks for pointing me in that direction @watchmanmonitor

This is what I’ve ended up with, which is working for me:

$.getJSON(window.location.href + '.json', function (data) { 
json = data;
adwords_category = json.category_id;