Untitled

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <!-- задача: обходете масива от обекти и задайте стойностите на подходящите полета/елементи в html структурата -->
    <script>
    document.addEventListener("DOMContentLoaded", function(event){

        const obj =
        [{
          "name" : "Lindy",
          "breed" : "Cymric",
          "color" : "white",
          "kittens" : [
            {
              "name" : "Percy",
              "gender" : "m"
            },
            {
              "name" : "Thea",
              "gender" : "f"
            },
            {
              "name" : "Annis",
              "gender" : "f"
            }
          ]
        },
        {
          "name" : "Mina",
          "breed" : "Aphrodite Giant",
          "color" : "ginger",
          "kittens" : [
            {
              "name" : "Doris",
              "gender" : "f"
            },
            {
              "name" : "Pickle",
              "gender" : "f"
            },
            {
              "name" : "Max",
              "gender" : "m"
            }
          ]
        },
        {
          "name" : "Antonia",
          "breed" : "Ocicat",
          "color" : "leopard spotted",
          "kittens" : [
            {
              "name" : "Bridget",
              "gender" : "f"
            },
            {
              "name" : "Randolph",
              "gender" : "m"
            }
          ]
        }];

        let cats = [];
        // obj.forEach(item => {
        //     cats.push(item.name);
        //     item.kittens.forEach(kitty => {
        //         cats.push(kitty.name);
        //     })
        // });
        // for(item of obj){
        //     cats.push(item.name);
        //     for(kitty of item.kittens){
        //         cats.push(kitty.name);
        //     }
        // }
        cats = obj.map(item => [item.name, item.kittens.map(kitty => kitty.name)].flat()).flat();
        console.log(cats);

      });

    </script>
  </head>
  <body>

  </body>
</html>