From eb1e931459ee615b08bd5b7e76d6d1fe885b333a Mon Sep 17 00:00:00 2001
From: Dylan Lom <dylanlom@gmail.com>
Date: Thu, 27 May 2021 21:48:08 +1000
Subject: [PATCH] Use arrow functions in DjlJson

`this` is spooky...

Also improve wording and order in example.html slightly
---
 DjlJson.js   | 17 +++++++++++------
 example.html |  8 ++++----
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/DjlJson.js b/DjlJson.js
index 8d439df..ea4d336 100644
--- a/DjlJson.js
+++ b/DjlJson.js
@@ -9,18 +9,23 @@
 // TODO: Allow accessing local objects
 // TODO: Implement attributeChangedCallback and re-fetch
 class DjlJson extends HTMLElement {
-  src; // string
-  prop; // string
-  placeholder; // string
+  src // string
+  prop // string
+  placeholder // string
 
   constructor() {
-    super();
+    super()
 
     this.src = this.getAttribute('src')
     this.prop = this.getAttribute('prop').split('.')
     this.placeholder = this.textContent
 
-    fetch(this.src)
+    this.fetchSrc()
+  }
+
+
+  fetchSrc = () => {
+    return fetch(this.src)
       .then(resp => {
         if (!resp.ok)
           throw new Error(`Unabled to retrieve resouce ${this.src} (${resp.statusText})`)
@@ -31,7 +36,7 @@ class DjlJson extends HTMLElement {
       .catch(err => { console.error(err); this.textContent = err })
   }
 
-  getProp(obj, prop) {
+  getProp = (obj, prop) => {
     if (!prop.length) return obj
     return this.getProp(obj[prop[0]], prop.slice(1))
   }
diff --git a/example.html b/example.html
index 58122e4..08a7aa5 100644
--- a/example.html
+++ b/example.html
@@ -36,7 +36,7 @@
 
     <article id="djl-script">
       <p>Below are some examples of the djl-code element. It executes the JavaScript given as it's text, and allows editing and re-execution by clicking on it</p>
-      <p><djl-script>['This','is','a','djl-script','element', '(click', 'on', 'me', 'to', 'edit).'].join(' ');</djl-script></p>
+      <p>5,000 * 57 = <djl-script>5000 * 57</djl-script></p>
       <p><djl-script>`Happy ${['Sun', 'Mon', 'Tues', 'Wednes', 'Thurs', 'Fri', 'Satur'][new Date().getDay()]}day`</djl-script></p>
     </article>
 
@@ -49,11 +49,11 @@
 
     <article id="djl-json">
       <p>Below are some examples of the djl-json element. It retrieves a JSON document from <code>src</code>, and displays the property <code>prop</code></p>
-      <p>My pets are called:
+      <p>According to example.json, my pets are called:
           <djl-json src="example.json" prop="about.pets"></djl-json>
       </p>
-      <p>My name in example.json is: <djl-json src="example.json" prop="about.name"><code>loading...</code></djl-json></p>
-      <p>Stick a spinner inside to let people know you're getting something!<djl-json src="example.json" prop="about.dob"><djl-spinner/></djl-json> (you may need to throttle your network if running this locally)</p>
+      <p>...and my name is: <djl-json src="example.json" prop="about.name"><code>loading...</code></djl-json></p>
+      <p>Stick a spinner inside to let people know you're getting your date of birth: <djl-json src="example.json" prop="about.dob"><djl-spinner/></djl-json><br />(you may need to throttle your network to see this if you're running this locally)</p> 
     </article>
   </body>
 </html>