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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

    <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"
            }
          ]
        }];

          for(item of obj){
            console.log(item.name);
            for(k of item.kittens){
              console.log(k.name);
            }
          }
          let cats = [];

          obj.forEach(item => {
            cats.push(item.name);
            item.kittens.forEach(k => {
              cats.push(k.name);
            })
          });

          // console.log(cats);

          let kats = obj.map(item => [item.name, item.kittens.map(k => k.name)]);
          let kats2 = obj.map(item => [item.name, item.kittens.map(k => k.name)].flat()).flat();
          console.log(kats2);
      });

    </script>
  </head>
  <body>

  </body>
</html>