sidebarDepth: 2
Cached APIs
Description
A locally cached version of SCBD's most static API's.
Install
yarn add @action-agenda/cached-apis
npm install @action-agenda/cached-apis
initializeApiStore = (opts = {})
initializes the local store (IndexedDB/WebSQL/local storage) depending on client.
Properties: (options:Object)
<<< @/packages/cached-apis/src/default-options.mjs#options
Options: apisUrls
<<< @/packages/cached-apis/src/default-options.mjs#apisUrls
Options: dataSources
<<< @/packages/cached-apis/src/default-options.mjs#dataSources
getData = async (dataSource, noCache=false)
lookUp = async(dataSource, keys, single=false)
Data References
Action Categories
Thematic Areas
Government Types
Organization Types
Regions
Aichi Biodiversity Targets
SDG's
Countries
Jurisdictions
Example
lookUp('all', ['528B1187-F1BD-4479-9FB3-ADBD9076D361', 'ca' ,'AICHI-TARGET-10','CBD-SUBJECT-ABS'])
{{lookUp}}
#
CachedApis.getData('actionCategories')
{{actionCategories}}
<script>
import * as CachedApis from '../cached-apis/src/index.mjs'
export default {
methods: { getExamp },
computed: { cachedApis: () => CachedApis },
data() {
return {
exampleData: null,
exampleHeader: null,
sdgs:[],
aichis:[],
subjects:[],
jurisdictions:[],
govTypes:[],
orgTypes:[],
regions:[],
countries:[],
lookUp:[],
actionCategories:[]
}
},
async mounted () {
CachedApis.initializeApiStore()
this.lookUp = await CachedApis.lookUp('all', ['528B1187-F1BD-4479-9FB3-ADBD9076D361', 'ca' ,'AICHI-TARGET-10','CBD-SUBJECT-ABS'])
this.actionCategories = await CachedApis.getData('actionCategories')
this.countries = await CachedApis.getData('countries')
this.regions = await CachedApis.getData('regions')
this.orgTypes = await CachedApis.getData('orgTypes')
this.govTypes = await CachedApis.getData('govTypes')
this.jurisdictions = await CachedApis.getData('jurisdictions')
this.subjects = await CachedApis.getData('subjects')
this.aichis = await CachedApis.getData('aichis')
this.sdgs = await CachedApis.getData('sdgs')
this.getExamp()
},
destroyed(){
this.exampleHeader.parentNode.removeChild(this.exampleHeader)
this.exampleData.parentNode.removeChild(this.exampleData)
}
}
function getExamp(){
const test = document.getElementsByTagName('main')[0].lastElementChild.id
if(test === 'aa-data') return
this.exampleHeader = document.getElementById('example-hr')
this.exampleData = document.getElementById('aa-data')
this.exampleHeader.parentNode.removeChild(this.exampleHeader)
this.exampleData.parentNode.removeChild(this.exampleData)
const main = document.getElementsByTagName('main')[0]
this.exampleHeader.classList.add('aaexample-header')
main.appendChild(this.exampleHeader)
main.appendChild(this.exampleData)
}
</script>
<style scoped>
.aaexamp{
padding: 3em 3em 3em 3em;
background-color: rgb(38, 90, 79);
}
.aaexamp .inner{
padding: 5em 5em 5em 5em;
background-color: white;
}
.aaexamp-header{
max-width: 740px;
margin: 0 auto;
padding: 2rem 2.5rem;
}
</style>