Fix bug with nested objects in report

js/ds.js

@@ -152,119 +152,14 @@ DataSpace.renderObjectReport = function (report, images)
     document.querySelector('#rep-tit')
         .innerText = `${resType} ${report.displayname}`;
 
-    const repTable = document.querySelector('#res-before tbody');
+    _createObjectTable(resType, shape, resource);
-
-    // TODO manage files and nested objects
-    for (const key in shape.get('before-gallery')) {
-        const row = document.createElement('tr');
-        let innerList = null;
-        
-        // TODO refactor
-        if (typeof resource[key] == 'object') {
-            const boolValue = '@value' in resource[key];
-            innerList = document.createElement('ul');
-
-            if (! boolValue) {
-                for (const k in resource[key]) {
-                    const li = document.createElement('li');
-                    li.innerHTML = 
-                        `<strong>${k.replace(key,'')}</strong>:
-                        ${resource[key][k]}`;
-
-                    if (resource[key][k] !== null) {
-                        innerList.appendChild(li);
-                    }
-                }
-            } else {
-                innerList.innerHTML = 
-                    `<li>${resource[key]['@value']}</li>`;
-            }
-        }
-
-        let value = innerList !== null ? 
-            innerList.outerHTML : resource[key];
-
-        row.innerHTML = `
-            <td class="text-bold key">${key.replace(resType, '')}</td>
-            <td>${value}</td>
-        `;
-
-        if (!key.includes('Images') && !key.includes('Photos')) {
-            repTable.appendChild(row);
-        }
-    }
 
     if (images.length) {
-        // Create image gallery
+        _createImgGallery(images, 'gallery');
-        // TODO refactor...
-        let gallery = document.querySelector('#gallery');
-        gallery.parentElement
-            .classList.remove('d-hide');
-
-        for (const src of images) {
-            const img = document.createElement('img');
-            img.className = 'img-responsive img-fit-cover';
-            img.src = src;
-
-            const col = document.createElement('div');
-            col.className = 'column col-3 c-hand spotlight';
-            col.setAttribute('data-src', src);
-            col.setAttribute('data-download', true);
-
-            col.appendChild(img);
-            gallery.appendChild(col);
-        }
     }
 
     // Create after-gallery...
-    let after = document.querySelector('#res-after');
+    _createObjectTail(resType, shape, resource);
-
-    for (const key in shape.get('after-gallery-1-col')) {
-        const col = document.createElement('div');
-
-        col.className = 'column col-12';
-        col.innerHTML = `
-            <p class="text-bold">${key.replace(resType, '')}</p>
-            <p>${resource[key]}</p>
-        `;
-
-        after.appendChild(col);
-    }
-
-    for (const key in shape.get('after-gallery-2-col')) {
-        const col = document.createElement('div');
-
-        col.className = 'column col-6';
-        let displayValue = resource[key];
-
-        if (typeof resource[key] === 'object') {
-            const boolValue = '@value' in resource[key];
-            if (! boolValue) {
-                col.innerHTML = '<ul>';
-
-                for (const innerKey in resource[key]) {
-                    col.innerHTML += `
-                        <li>
-                            <span class="text-bold">${innerKey.replace(resType, '')}</span>
-                            <span>${resource[key][innerKey]}</span>
-                        </li>
-                    `;
-                }
-                col.innerHTML += '</ul>';
-            }
-
-            displayValue = boolValue ?
-                resource[key]['@value'].replace('False', 'No') :
-                displayValue;
-        }
-
-        col.innerHTML = `
-            <p class="text-bold">${key.replace(resType, '')}</p>
-            <p>${displayValue}</p>
-        `;
-
-        after.appendChild(col);
-    }
 }
 /**
  * Fetch JSON report...
@@ -393,4 +288,117 @@ function _fetchError(message, htmlId)
     document.querySelector(`#${htmlId}`).appendChild(error);
 }
 
+function _createImgGallery(images, htmlId)
+{
+    let gallery = document.querySelector(`#${htmlId}`);
+    gallery.parentElement
+        .classList.remove('d-hide');
+
+    for (const src of images) {
+        const img = document.createElement('img');
+        img.className = 'img-responsive img-fit-cover';
+        img.src = src;
+
+        const col = document.createElement('div');
+        col.className = 'column col-3 c-hand spotlight';
+        col.setAttribute('data-src', src);
+        col.setAttribute('data-download', true);
+
+        col.appendChild(img);
+        gallery.appendChild(col);
+    }
+}
+
+function _createObjectTable(resType, shape, resource)
+{
+    const tableElement = document.querySelector('#res-before tbody');
+    for (const key in shape.get('before-gallery')) {
+        const row = document.createElement('tr');
+        let innerList = null;
+        
+        // TODO refactor
+        if (typeof resource[key] == 'object') {
+            innerList = document.createElement('ul');
+
+            for (const innerKey in resource[key]) {
+                const li = document.createElement('li');
+
+                li.innerHTML = innerKey === '@value' ?
+                    resource[key]['@value'] :
+                    `<strong>${innerKey.replace(key,'')}</strong>:
+                    ${resource[key][innerKey]}`;
+
+                if (resource[key][innerKey] !== null) {
+                    innerList.appendChild(li);
+                }
+            }
+        }
+
+        let value = innerList !== null ? 
+            innerList.outerHTML : resource[key];
+
+        row.innerHTML = `
+            <td class="text-bold key">${key.replace(resType, '')}</td>
+            <td>${value}</td>
+        `;
+
+        if (!key.includes('Images') && !key.includes('Photos')) {
+            tableElement.appendChild(row);
+        }
+    }
+}
+
+function _createObjectTail(resType, shape, resource)
+{
+    let after = document.querySelector('#res-after');
+
+    for (const key in shape.get('after-gallery-1-col')) {
+        const col = document.createElement('div');
+
+        col.className = 'column col-12';
+        col.innerHTML = `
+            <p class="text-bold">${key.replace(resType, '')}</p>
+            <p>${resource[key]}</p>
+        `;
+
+        after.appendChild(col);
+    }
+
+    for (const key in shape.get('after-gallery-2-col')) {
+        const col = document.createElement('div');
+
+        col.className = 'column col-6';
+        let displayValue = resource[key];
+        const isNested = typeof resource[key] === 'object';
+
+        if (isNested) {
+            for (const innerKey in resource[key]) {
+                if (resource[key][innerKey] !== "") {
+                    const innerCol = document.createElement('div');
+                    innerCol.className = 'column col-6';
+                    innerCol.innerHTML = innerKey === '@value' ?
+                        `
+                            <p class="text-bold">${key.replace(resType, '')}</p>
+                            <p>${displayValue['@value'].replace('False', 'No')
+                                .replace('True', 'Yes')}</p>
+                        ` :
+                        `
+                            <p class="text-bold">${innerKey.replace(resType, '')}</p>
+                            <p>${displayValue[innerKey]}</p>
+                        ` ;
+
+                    after.appendChild(innerCol);
+                }
+            }
+        } else {
+            col.innerHTML = `
+                <p class="text-bold">${key.replace(resType, '')}</p>
+                <p>${displayValue}</p>
+            `;
+
+             after.appendChild(col); 
+        }
+    }
+}
+
 export default DataSpace;

js/views/report.js

@@ -18,6 +18,6 @@ document.addEventListener('readystatechange', async () => {
     // Close modal
     document.querySelector('.modal').classList.remove('active');
 
+    // Create report HTML
     DataSpace.renderObjectReport(report, images);
-
 });