javascriptjquerylookup-tables

Access properties of a lookup table


I'm using Blogger, and after 20 years and 10K posts, I have exported all posts and migrated all content to a new CMS and a new domain. By using jQuery in the Blogger HTML template, I have set up links in all Blogger posts to the same post at the new domain, i.e. with an HTML link "Click to go to the new site".

And that works for many of the Blogger > New site post links, because the post name part of the slug is the same after the migration, i.e., old: https://example.blogspot.com/a-post.html and new: https://mynewdomain.com/a-post.html so displaying a redirect is easy. I use jQuery in Blogger HTML template to replace example.blogspot.com with mynewdomain.com to form a redirect link.

But due to the method of importing Blogger content into the new CMS, I have hundreds of posts where the destination URL is different, e.g. https://example.blogspot.com/another-post.html needs to link to https://mynewdomain.com/another-post-2.html

I thought of a way to create new links at Blogger with jQuery: use a two value "A:B" structure lookup table to store the new and old URLs and to loop through and show a link to the post at the new domain, like this:

var lookupTable = [
"https://example.blogspot.com/a-post.html:https://mynewdomain.com/a-post-2.html",
"https://example.blogspot.com/another-post.html:https://mynewdomain.com/another-post-2.html",
// etc.....
];

But how do I loop through and conditionally call the mynewdomain URLs in the lookup table? An if-else loop? A for-each loop?

This is my pseudo code:


Solution

  • The DS of your lookup-table shouldn't be an array, it should be an object (key value pair) ideally.

    Try this.(Added comments for readbility)

    // key value pair containing the old and the new uri
    const lookupTable = {
      "https://example.blogspot.com/a-post.html": "https://mynewdomain.com/a-post-2.html",
      "https://example.blogspot.com/another-post.html": "https://mynewdomain.com/another-post-2.html",
    };
    
    // the function that returns the url to redirect to
    const getRedirectUrl = () => {
        // try get the url from the lookup table using the key
      let newUrl = lookupTable[window.location.href];
      if (!newUrl) {
        // if not found, use the path of the current url and append it to the new domain name
        newUrl = "https://mynewdomain.com" + window.location.pathname;
      }
      // returns the redirect url
      return newUrl;
    };
    
    // "DOM ContentLoaded(Ready)" event in JavaScript
    document.addEventListener("DOMContentLoaded", (event) => {
      const url = getRedirectUrl();
      // Example: navigates you to the new url
      window.location.href = url;
      // TODO: pass that to a function that creates a hyperlink
      // createHyperlink(url);
    });
    

    Update: Pseudo code to create a hyperlink

    const createHyperlink = (url) => {
      const hyperlink = document.createElement("a");
      hyperlink.href = url;
      hyperlink.textContent = "Domain Changed. Click here!";
      // removes the html present in the body and inserts the hyperlink
      document.body.innerHTML = hyperlink.outerHTML;
      // optional styling, to align the link to the page center
      document.body.setAttribute(
        "style",
        "display: flex; justify-content: center; align-items: center; height: 90vh;"
      );
    };