maryluis
/
homeworks_Second_modul


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        fetch('https://swapi.dev/api/people/1/')
        .then(res => res.json())
        .then(luke => objectToDm(document.body, luke))
        function objectToDm(el, data) {

            let table = document.createElement("table")
            table.border = 1
            el.appendChild(table)
            for (let key in data) {

                let row = document.createElement("tr");
                table.appendChild(row);

                let name = document.createElement("th");
                name.innerText = key;
                row.appendChild(name);


                if(data[key] instanceof Array) {

                    for (let aboutLink of data[key]) {
                        let about = document.createElement("td");
                        about.style = "border: 2px solid black";
                        row.appendChild(about)

                        if(aboutLink.includes("http")) {
                            let button = document.createElement("button");
                            button.innerText = aboutLink;
                            button.onclick = () => {
                                fetch(`${button.innerText}`)
                                .then(res => res.json())
                                
                                .then(direction => objectToDm(document.body, direction))
                            }
                            about.appendChild(button);                       
                        } 
                    }
                    
                } else {
                    let about = document.createElement("td");
                    about.style = "border: 2px solid black";
                    row.appendChild(about)

                    if(`${data[key]}`.includes("http")) {
                            let button = document.createElement("button");
                            button.innerText = data[key];
                            button.onclick = () => {
                                fetch(`${button.innerText}`)
                                .then(res => res.json())
                                
                                .then(direction => objectToDm(document.body, direction))
                            }
                            about.appendChild(button);
                        
                        } else {
                            about.innerText = `${data[key]}`;
                        }
                }
            }

        }
    </script>

</body>
</html>