Данные выводятся в виде списка

task_1/index.html

@@ -14,15 +14,7 @@
         <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="64px" height="64px" viewBox="0 0 128 128" xml:space="preserve"><rect x="0" y="0" width="100%" height="100%" fill="#FFFFFF" /><g><circle cx="16" cy="64" r="16" fill="#000000" fill-opacity="1"/><circle cx="16" cy="64" r="14.344" fill="#000000" fill-opacity="1" transform="rotate(45 64 64)"/><circle cx="16" cy="64" r="12.531" fill="#000000" fill-opacity="1" transform="rotate(90 64 64)"/><circle cx="16" cy="64" r="10.75" fill="#000000" fill-opacity="1" transform="rotate(135 64 64)"/><circle cx="16" cy="64" r="10.063" fill="#000000" fill-opacity="1" transform="rotate(180 64 64)"/><circle cx="16" cy="64" r="8.063" fill="#000000" fill-opacity="1" transform="rotate(225 64 64)"/><circle cx="16" cy="64" r="6.438" fill="#000000" fill-opacity="1" transform="rotate(270 64 64)"/><circle cx="16" cy="64" r="5.375" fill="#000000" fill-opacity="1" transform="rotate(315 64 64)"/><animateTransform attributeName="transform" type="rotate" values="0 64 64;315 64 64;270 64 64;225 64 64;180 64 64;135 64 64;90 64 64;45 64 64" calcMode="discrete" dur="720ms" repeatCount="indefinite"></animateTransform></g></svg>
     </div>
     <div class="show" >
-    <p><b>Name: </b><span id="name"></span></p>
 
-    <p><b>Region: </b><span id="region"></span></p>
-
-    <p><b>Subregion: </b><span id="subregion"></span></p>
-
-    <p><b>Capital: </b><span id="capital">  </span></p>
-
-    <p><b>Flag: </b><span id="flag"> </span></p>
 </div>
 
     <input id="country_name" type="text">

task_1/script.js

@@ -23,7 +23,7 @@ const request = (config) => {
             else {
                 error('bad response');
             }
-            
+
             return;
         }
         else if (xml.status === '404') {
@@ -44,14 +44,9 @@ const request = (config) => {
 }
 
 const processResult = (result) => {
-    countryName.innerText = result[0].name
-    const flagImg = document.createElement('img');
-    flagImg.setAttribute('src', `${result[0].flag}`);
-    flagImg.style = 'width: 150px'
-    flag.append(flagImg)
-    capital.innerText = result[0].capital
-    region.innerText = result[0].region
-    subregion.innerText = result[0].subregion
+
+    const items = createTree(result[0])
+    infoToshow.append(items)
     loader.style.display = 'none'
 }
 
@@ -61,9 +56,56 @@ const errorHandler = (msg) => {
 }
 
 
+const createTree = (data) => {
+    console.log(data);
+    const ul = document.createElement('ul')
+    for (item in data) {
+        const li = document.createElement('li')
+        if (Array.isArray(data)) {
+            if (typeof data[item] === 'object') {
+                const innerUl = createTree(data[item])
+                li.append(innerUl)
+            } else {
+                li.append(`${data[item]}`)
+            }
+        } else {
+            if (Array.isArray(data[item])) {
+                li.innerHTML = `<b>${item}:</b> \n`
+                const innerUl = createTree(data[item])
+                li.append(innerUl)
+            } else {
+                if ((typeof data[item] === 'object')) {
+                    li.innerHTML = `<b>${item}:</b> \n`
+                    const innerUl = createTree(data[item])
+                    li.append(innerUl)
+                } else {
+                    li.innerHTML = `<b>${item}:</b> ${data[item]}`
+                }
+                
+            }
+        }
+        ul.append(li)
 
+    }
+    return ul
+}
 
 
+const createTreefromObject = (data) => {
+    const ul = document.createElement('ul')
+    for (item in data) {
+        const li = document.createElement('li')
+        if (Array.isArray(data[item])) {
+            li.append(`${item}: `)
+            const innerUl = createTree(data[item])
+            li.append(innerUl)
+        } else {
+            li.append(`${item}: ${data[item]}`)
+        }
+        ul.append(li)
+    }
+    return ul
+}
 
 const showInfo = () => {
     if (userInput.value) {