Добавленно решение с промис.all

task_1/script.js

@@ -14,8 +14,6 @@ const request = (config) => {
     loader.style.display = 'flex'
     const { method, path, success, error } = config;
     return new Promise((resolve, reject) => {
-        
-    
         const xml = new XMLHttpRequest();
         xml.addEventListener('load', () => {
             if (xml.status >= 200 || xml.status > 300) {
@@ -25,8 +23,6 @@ const request = (config) => {
             else {
                 reject(this.status)
             }
-        
-
         });
         loader.style.display = 'none'
         xml.addEventListener('error', () => {
@@ -37,64 +33,85 @@ const request = (config) => {
         })
         xml.open(method, path);
         xml.send();
-})
-}
-
-const processResult = (result) => {
-
-    const items = createTree(result[0])
-    infoToshow.append(items)
-    loader.style.display = 'none'
+    })
 }
 
-const errorHandler = (msg) => {
-    alert(msg)
-    console.error(msg)
-}
+const processResultMainCountry = (result) => {
+    console.log(result);
+    const h2 = document.createElement('h2')
+    h2.innerText = result[0].name
+    const ul = document.createElement('ul')
 
+    // const items = createTree(result[0])
+    infoToshow.append(h2)
+    const names =  result[0]['borders'].map( item => {
+        return request({method: 'GET', path: `https://restcountries.com/v3.1/alpha/${item}` })});
         
-const createTree = (data) => {
-    const ul = document.createElement('ul')
-    for (item in data) {
+        borderCountry = Promise.all(names)
+        .then( data => {
+            data.forEach(element => {
                 const li = document.createElement('li')
-        if (false) {
-            const flagImg = document.createElement('img');
-            flagImg.setAttribute('src', `${item.flag}`);
-            flagImg.style = 'width: 150px'
-            li.append(flagImg)
-        }
-        else {
-            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]}`
-                    }
+                li.innerText = element[0].name.common
+                ul.append(li)
 
-                }
-            }
+            });
+        })
+        infoToshow.append(ul)
+        console.log(borderCountry);
+        loader.style.display = 'none'
     }
     
-        ul.append(li)
 
-    }
-    return ul
+
+
+
+const errorHandler = (msg) => {
+    alert(msg)
+    console.error(msg)
 }
 
+// const createTree = (data) => {
+//     const ul = document.createElement('ul')
+//     for (item in data) {
+//         const li = document.createElement('li')
+//         if (false) {
+//             const flagImg = document.createElement('img');
+//             flagImg.setAttribute('src', `${item.flag}`);
+//             flagImg.style = 'width: 150px'
+//             li.append(flagImg)
+//         }
+//         else {
+//             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 showInfo = () => {
@@ -107,7 +124,7 @@ const showInfo = () => {
 
     }
     request(config)
-    .then(processResult)
+        .then(processResultMainCountry)
         .catch(errorHandler)
 
     infoToshow.style.display = 'block'