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

task_1/script.js

@@ -14,86 +14,103 @@ 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) {
+                const result = JSON.parse(xml.responseText);
+                resolve(result)
+            }
+            else {
+                reject(this.status)
+            }
+        });
+        loader.style.display = 'none'
+        xml.addEventListener('error', () => {
+            error('network error');
+        })
+        xml.addEventListener('timeout', () => {
+            error('server response is late')
+        })
+        xml.open(method, path);
+        xml.send();
+    })
+}
+
+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}` })});
         
+        borderCountry = Promise.all(names)
+        .then( data => {
+            data.forEach(element => {
+                const li = document.createElement('li')
+                li.innerText = element[0].name.common
+                ul.append(li)
+
+            });
+        })
+        infoToshow.append(ul)
+        console.log(borderCountry);
+        loader.style.display = 'none'
+    }
     
-    const xml = new XMLHttpRequest();
-    xml.addEventListener('load', () => {
-        if (xml.status >= 200 || xml.status > 300) {
-            const result = JSON.parse(xml.responseText);
-            resolve(result)
-        }
-        else {
-            reject(this.status)
-        }
-        
 
-    });
-    loader.style.display = 'none'
-    xml.addEventListener('error', () => {
-        error('network error');
-    })
-    xml.addEventListener('timeout', () => {
-        error('server response is late')
-    })
-    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 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]}`
+//                     }
 
-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)
+//         ul.append(li)
 
-    }
-    return ul
-}
+//     }
+//     return ul
+// }
 
 
 
@@ -107,9 +124,9 @@ const showInfo = () => {
 
     }
     request(config)
-    .then(processResult)
-    .catch(errorHandler)
-        
+        .then(processResultMainCountry)
+        .catch(errorHandler)
+
     infoToshow.style.display = 'block'
 }
 button.addEventListener('click', showInfo)