Surya Sankar SuryaSankar

Let's try to understand joins by trying to verbalize what 'question' each join is trying to answer.

We will try to frame the explanation in terms of a real world example. We will build a Jobs DB with two tables - job and candidate. The job table will have a city field representing where the job location is at. Similarly candidate table also has a city field representing the city which the candidate prefers. Our goal is to match candidates to jobs based on the city. We will try to answer different questions with different joins and subqueries.

This seemed like a better example than other examples based on primary keys because this particular example does the matching on a column which can allow duplicate values. So we can understand the general case of how joins work. The case where the join is on a primary key column or a col with unique constraint - will just be a special case of this general case.

	const path = require('path');

	module.exports = {
	mode: 'development',
	entry: './src/index.js',
	output: {
	filename: 'mylistree.js',
	path: path.resolve(__dirname, 'dist')
	}
	};

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="./node_modules/listree/dist/listree.min.css"/>
	<title>Listree Example</title>
	</head>
	<body>
	<ul class="listree">

	import { terser } from "rollup-plugin-terser";
	import scss from 'rollup-plugin-scss'
	import pkg from './package.json';

	export default {
	input: 'src/js/index.js',
	plugins: [
	terser(),
	scss({
	output: 'dist/listree.min.css',

	{
	"name": "listree",
	"version": "0.0.6",
	"description": "Package to convert a nested list into a tree menu",
	"module": "dist/listree.esm.min.js",
	"browser": "dist/listree.umd.min.js",
	"main": "dist/listree.esm.min.js",
	"repository": {
	"type": "git",
	"url": "git+https://github.com/suryasankar/listree.git"

	import '../styles/main.scss';

	function listree() {
	const subMenuHeadings = document.getElementsByClassName("listree-submenu-heading");
	Array.from(subMenuHeadings).forEach(function(subMenuHeading){
	subMenuHeading.classList.add("collapsed");
	subMenuHeading.nextElementSibling.style.display = "none";
	subMenuHeading.addEventListener('click', function(event){
	event.preventDefault();
	const subMenuList = event.target.nextElementSibling;

	import listree from 'listree';

	listree();
	console.log("Initialized My Listree");

	.listree-submenu-heading {
	cursor: pointer;
	}
	ul.listree {
	list-style: none;
	}
	ul.listree-submenu-items {
	list-style: none;
	border-left: 1px dashed black;
	white-space: nowrap;

	{
	"scripts": {
	"build": "rollup -c",
	"watch": "rollup -c -w"
	}
	}

Surya Sankar SuryaSankar

Creation of tables