Map-List: JavaScript Data Structure That Models Applications

A JavaScript Data Structure For Indexed and Direct Access

A Front End Pattern

  • a chunk of data is returned from a service call
  • a list that allows the user to view a summary of the data is rendered
  • the user selects an item from the list
  • the user can then view more data about the item and take action on it

CRUD: Create Read Update Delete

CRUD: Read
CRUD: Create and Update
CRUD: Delete

Apps With Local Data

Map-List: A JavaScript Data Structure

Class specification for Map-List

Details of Maintaining Two Structures

if (this.errOnDuplicates === true) {
if (this._mapCollection[item[this.key]] !== undefined) {
this._clearCollections();
throw new Error(`Item with ${this.key} = ${item[this.key]} already exists`);
} else {
this._addToCollections(item);
}
} else {
this._addToCollections(item);
}
this._listCollection.some((item, index)=>{
if (item[this.key] === keyToRemove){
this._listCollection.splice(index,1);
delete this._mapCollection[keyToRemove];
itemToRemove = null;
return true;
}
}, this);

Unit Testing

Pass/Fail badge embedded from Travis-CI

Performance

const used = process.memoryUsage().heapUsed / 1024 / 1024;
console.time("direct access");
console.log("direct",mapList.getItemByKey("test999").value);
console.timeEnd("direct access");
console.time("filter");
let filterArr = arrData.filter(item=>item.name === "test999");
console.log(filterArr[0].value);
console.log("direct",mapList.getItemByKey("test999").value);
console.timeEnd("filter");

Using Map-List in the Browser

import { MapList } from './index.js';

Using Map-List with a Framework: Vue.js

import MapList from 'map-list'
data() {    
return {
hike: mapList.getItemByKey(this.$route.params.hike_id),
hikes: mapList}
data() { return { 
hikes: mapList,
searchKey: "" }
<tr v-for="(hike,index) in filteredHikes" v-bind:key="index">
computed: {
filteredHikes: function() {
let search = this.searchKey.toLowerCase();
return this.hikes.asList().filter((hike)=> {
return (
search.length === 0 ||
hike.name.toLowerCase().indexOf(search) !== -1);
}, this);
}
}
data() {return { hike: mapList.getItemByKey(this.$route.params.hike_id), hikes: mapList };},
this.hikes.update(this.hike);
this.hikes.remove(this.hike.id)

Establishing Code Patterns with Data Structures

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store