Featured post in tumblr based on multiple tags

Question

I'm trying to display a specific tumblr post, based on tags.

Struggling with: 1. how to query tumblr for multiple tags? -- (a similar post here: How to query multiple tags in Tumblr's read api?) -- but how would I adapt it to my script? 2. assigning a class to the rendered post, based on its tag. For instance, if the post is tagged "featured_1", it should display a class of "featured_1", in the rendered html.

Many thanks in advance! Any help appreciated.

here is the script I'm working with:

/*
--------------------------------------
    Created by james <at> bandit.co.nz
    http://blog.bandit.co.nz
*/
Featured = {
    'apiNum' : 100, // how many posts to read
    'listId' : 'featured', // the id of the ul to write to
    'tagName' : 'featured', // the name of the tag we're searching for
    'tagName2': 'featured_1',
    'tagName3': 'featured_2',
    'tagName4': 'featured_3',

    'postDB' : [],
    'listPos' : 0,
    'doList' : function (where) {
        var li; var ul = $('#'+where);
        var titles = {"link":"link-text", "photo":"photo-caption", "quote":"quote-text", "regular":"regular-body", "video":"video-caption"}



        // cycle through post database
        pcount = Featured.postDB.length;
        for(i=Featured.listPos;i<pcount;i++) {
            p = Featured.postDB[i];
            if(p[titles[p.type]] != '') titlestr = p[titles[p.type]].replace(/<\/?[^>]+>/gi, '');
            else titlestr = p['url'];

            li = document.createElement('li');
            $(li).html('<p class=" ">'+titlestr+'</p>');
            ul.append(li);

            Featured.listPos = pcount;
        }
    },

    'getData' : function() {
        $.get('/api/read/json?num='+Featured.apiNum+'&tagged='+Featured.tagName3+Featured.tagName+Featured.tagName2,
            function(data) {
                eval(data);
                for(i=0;i<tumblr_api_read.posts.length;i++) {
                    Featured.postDB.push(tumblr_api_read.posts[i]);
                    Featured.doList(Featured.listId);
                }

            }
        );
    }
};

$(document).ready(function(){
    Featured.getData();
});

Answer 1

Well everything is already there, either in your code, or in the SO post you provided. Since there seems to be no way to get multiple tags (I'm not a Tumbl user though), you still need to query for each tag on it's own. (Untested code, you might fix a missing { or typo somewhere).

Modify your getData function. Now it only reads a single tag and returns a jqXHR whislt pushing the result to your array.

 'getData' : function(tag) {
       return $.get('/api/read/json?num=' + Featured.apiNum + '&tagged=' + tag,
       function(data) {
          //do NOT use eval or a kitten will die somewhere
          Featured.postDB.push(data.posts); //change according to the result
       });
    }

Add a new function (copied from Gary Green from the post you supplied). This will call your previous function with each tag you want. When all these are done (note the when-then functions), you do whatever you need to do.

'myFunction' : function() {
    $.when(Featured.getData(Featured.tagName1), Featured.getData(Featured.tagName2) /*, and so on */)
      .then(function() {
         var posts = $.extend({}, arguments); //you might not need this
         Featured.doList(Featured.listId);
      });
 }