Skip to content

Instantly share code, notes, and snippets.

@leestott
Forked from solrevdev/index.html
Created May 16, 2020 20:09
Show Gist options
  • Save leestott/86a3ec11bf7b8f6a92a16063c5febdaf to your computer and use it in GitHub Desktop.
Save leestott/86a3ec11bf7b8f6a92a16063c5febdaf to your computer and use it in GitHub Desktop.
Vue.js - gistpad - display local police info
<div id="app">
<h2>Police data for Oxfordshire</h2>
<p>Using data from <a href="https://data.police.uk/docs/method/crime-street/">https://data.police.uk/docs/method/crime-street/</a></p>
<p>Built using <a href="https://vuejs.org/">vue.js</a> and <a href="https://marketplace.visualstudio.com/items?itemName=vsls-contrib.gistfs">gistpad</a></p>
<p>Dataset source <a href="https://data.police.uk/api/crimes-street/all-crime?poly=51.85110973276099,%20-1.4057047320491165:51.86298424914946,%20-1.1282999468928665:51.71262569681858,%20-1.1241800738459915:51.70241375059155,%20-1.3905985308772415:51.850261433101906,%20-1.4043314410334915">https://data.police.uk/api/crimes-street/all-crime?poly=51.85110973276099,%20-1.4057047320491165:51.86298424914946,%20-1.1282999468928665:51.71262569681858,%20-1.1241800738459915:51.70241375059155,%20-1.3905985308772415:51.850261433101906,%20-1.4043314410334915</a></p>
<p>Sample data: <a href="sample.json">sample.json</a></p>
<button @click="clearData">Clear data</button>
<button @click="loadData">Fetch data</button>
<hr>
<div id="records" v-for="record in records" key="record.id">
<p>[{{record.month}}] | {{record.category}} | {{record.location.street.name}}<span v-if="record.outcome_status != null">| {{record.outcome_status}}</span> </p>
</div>
</div>
{
"scripts": [
"vue"
],
"styles": []
}
{
"category": "anti-social-behaviour",
"location_type": "Force",
"location": {
"latitude": "51.719096",
"street": {
"id": 1203394,
"name": "On or near Sandford Road"
},
"longitude": "-1.226888"
},
"context": "",
"outcome_status": null,
"persistent_id": "29aeed65681bccac93e634feb0db6ffc6b573fdf8ec60a0c71a8656bf9e8aba5",
"id": 79154174,
"location_subtype": "",
"month": "2019-11"
}
new Vue({
el: "#app",
data: {
records : []
},
methods: {
async loadData() {
console.clear();
const json = await this.fetchData();
this.records = json;
console.log(this.records[0]);
},
async fetchData() {
const response = await fetch("https://data.police.uk/api/crimes-street/all-crime?poly=51.85110973276099,%20-1.4057047320491165:51.86298424914946,%20-1.1282999468928665:51.71262569681858,%20-1.1241800738459915:51.70241375059155,%20-1.3905985308772415:51.850261433101906,%20-1.4043314410334915");
const json = response.json();
return json;
},
clearData() {
console.clear();
const records = document.getElementById("records");
if(records) {
records.innerHTML = "";
}
}
}
});
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #eee
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment