adding lists

node-parents-children/app.js

@@ -1,4 +1,4 @@
-function initGrist(){
+function initGrist() {
     grist.ready({ requiredAccess: 'read table', columns: ["node", "children", "parents"] });
     grist.onRecord(function (record) {
         console.log("record", record);
@@ -16,10 +16,33 @@ function initGrist(){
 
 }
 
-function renderPage(mapped){
+function renderPage(mapped) {
     const node = mapped.node;
     console.log("node", node);
-    document.getElementById("node").innerText = node;
+
+    const nodeElement = document.getElementById("node");
+    nodeElement.innerText = node;
+
+    const parentsElement = document.getElementById("parents");
+    const parents = mapped.parents;
+    renderList(parentsElement, parents);
+
+    const childrenElement = document.getElementById("children");
+    const children = mapped.children;
+    renderList(childrenElement, children);
+
+
+}
+
+function renderList(element, nodes){
+    clearList(element);
+    console.log(nodes);
 }
 
+function clearList(list) {
+    while (list.firstChild) {
+      list.removeChild(list.firstChild);
+    }
+  }
+
 document.addEventListener("DOMContentLoaded", initGrist);

node-parents-children/index.html

@@ -12,6 +12,18 @@
     <main id="main">
         <div id="content">
             <p>Node: <span id="node">Node Placeholder</span></p>
+            <section>
+                <h2>Parents</h2>
+                <ul id="parents">
+                    <li>Parent placeholder should be deleted</li>
+                </ul>
+            </section>
+            <section>
+                <h2>Children</h2>
+                <ul id="children">
+                    <li>Child placeholder should be deleted</li>
+                </ul>
+            </section>
         </div>
     </main>
     <script src="./app.js"></script>