JSFiddle - React, Tailwind, and code Playground

JavaScript

var items = [{"id":"5","tobuy":"1","name":"pop"},
             {"id":"6","tobuy":"1","name":"fish"},
             {"id":"7","tobuy":"0","name":"soda"}];

var pkgs =  [{"item_id":"5","store":"Market","aisle":"3"},
             {"item_id":"6","store":"Market","aisle":"2"},
             {"item_id":"6","store":"Dept","aisle":"8"},
             {"item_id":"7","store":"Market","aisle":"4"}];

var table = equijoin(items, pkgs, "id", "item_id", function (item, pkg) {
    return {
        id: +item.id,
        tobuy: +item.tobuy,
        store: pkg.store,
        aisle: +pkg.aisle,
        name: item.name
    };
}).sort(function (a, b) {
    var aTobuy = a.tobuy, bTobuy = b.tobuy;

    if (aTobuy < bTobuy) return 1;
    if (aTobuy > bTobuy) return -1;

    var aStore = a.store, bStore = b.store;

    if (aStore < bStore) return -1;
    if (aStore > bStore) return 1;

    var aAisle = a.aisle, bAisle = b.aisle;

    if (aAisle < bAisle) return -1;
    if (aAisle > bAisle) return 1;

    var aName = a.name, bName = b.name;

    if (aName < bName) return -1;
    if (aName > bName) return 1;

    return a.id - b.id;
});

alert(JSON.stringify(table, null, 4));

function equijoin(primary, foreign, primaryKey, foreignKey, select) {
    var m = primary.length, n = foreign.length, index = [], c = [];

    for (var i = 0; i < m; i++) {     // loop through m items
        var row = primary[i];
        index[row[primaryKey]] = row; // create an index for primary table
    }

    for (var j = 0; j < n; j++) {     // loop through n items
        var y = foreign[j];
        var x = index[y[foreignKey]]; // get corresponding row from primary
        c.push(select(x, y));         // select only the columns you need
    }

    return c;
}