В чем ошибка? Uncaught TypeError: Cannot read property '0' of undefined

function getModalTableRow(Data, trow) {
  return Object.keys(Data).reduce((acc, item) => {
    let modaltd = document.createElement("td");

    modaltd.className = "modaltd";
    modaltd.innerText = Data[item];

    acc.appendChild(modaltd);

    return acc;
  }, trow);
}

function getTableRows(data, row) {
  console.log(data, row);
  return Object.keys(data).reduce((acc, item) => {
    let td = document.createElement("td");

    if (typeof data[item].data !== "object") {
      td.className = "col";
      td.innerText = data[item];
    } else {
      td.id = "btnview";
      const buttonView = document.createElement("button");
      buttonView.innerText = "view";
      buttonView.id = data[item].id;

      buttonView.className = "view";

      td.appendChild(buttonView);
    }

    acc.appendChild(td);

    return acc;
  }, row);
}

function getTableColumnName(data, row) {
  console.log(data, row);
  return data.reduce((acc, item) => {
    let th = document.createElement("th");
    th.className = "thname";
    th.innerText = item;

    acc.appendChild(th);

    return acc;
  }, row);
}

let btn = document.querySelector("button");
let textarea = document.querySelector("textarea");
let centerBox = document.querySelector(".center-box");
let table = document.querySelector("table");
let myjson = {};
const modal = document.querySelector(".modal-box");
const closeButton = document.querySelector(".close-button");
const modalTable = document.querySelector(".modal-content table");

window.onload = function () {
  table.onclick = function (event) {
    if (event.target.className === "view") {
      modalTable.innerHTML = "";

      let trHead = document.createElement("tr");
      let trBody = document.createElement("tr");

      const targetId = event.target.id;
      const modalData = myjson.CyberPunk.find(
        (item) => item.attachments.id == targetId
      ).attachments.data;
      const modalkeys = Object.keys(modalData);
      const newModalTh = getModalTableRow(modalkeys, trHead);
      const newModalTr = getModalTableRow(modalData, trBody);

      modalTable.appendChild(newModalTh);
      modalTable.appendChild(newModalTr);

      modal.classList.add("modal-visible");
    }
  };

  modal.onclick = function () {
    modal.classList.remove("modal-visible");
  };

  closeButton.onclick = function () {
    modal.classList.remove("modal-visible");
  };

  btn.onclick = function () {
    myjson = JSON.parse(textarea.value);

    centerBox.classList.add("hide-center-box");

    if (textarea.value !== "") {
      const headTr = document.createElement("tr");
      const nameColumns = Object.keys(myjson.CyberPunk[0]);
      const tableHeadColumn = getTableColumnName(nameColumns, headTr);

      table.appendChild(tableHeadColumn);

      for (i = 0; i < myjson.CyberPunk.length; i++) {
        let tr = document.createElement("tr");
        const newTr = getTableRows(myjson.CyberPunk[i], tr);

        table.appendChild(newTr);
      }
    } else {
      alert("Вы не добавили JSON файл!");
      centerBox.classList.remove("hide-center-box");
    }
  };
};

main {
    width: 100%;
    height: calc(100vh - 80px);
    background: url(original.jpg) no-repeat;
    background-size: cover;
    overflow: hidden;
    background-attachment: scroll;
}

body {
    margin: 0;
    padding: 0;
}

header {
    z-index: 1;
    height: 80px;
    background-color: rgba(55, 71, 84, 0.9);
    display: flex;
    flex-direction: row;
    justify-content: center;
    color: white;
    align-items: center;
    text-shadow: 2px 2px 3px black;
}

.logo {
    padding: 4px;
}

.logo-icon {
    height: 50px;
}

.head-text p {
    font-size: 25px;
    color: #ffffff;
    padding: 4px;
}

.textarea-box textarea {
    width: 100%;
    height: 80px;
}

.center-box {
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    padding: 5px;
    width: 500px;
    height: auto;
    overflow: hidden;
    background-color: rgba(55, 71, 84, 0.9);
    color: white;
}

.center-box div {
    margin: 0px 15px 20px 10px;
}

.transformButton-box {
    display: flex;
    justify-content: center;
}

.transformButton-box button {
    color: white;
    background-color: #65c7d0;
    font-size: 15px;
    padding: 10px;
    font-weight: bold;
    border: none;
    text-shadow: 1px 1px 2px black;
    border-radius: 5px;
    outline: none;
}

.transformButton-box button:active {
    border: none;
    outline: none;
    background-color: white;
    color: #65c7d0;
}

.transformButton-box button:hover {
    background-color: #478e94;
    outline: none;
}

.textarea-box textarea {
    cursor: pointer;
    width: 100%;
    height: 130px;
    resize: none;
    justify-content: center;
    background-color: rgba(55, 71, 84, 0.9);
    color: #65c7d0;
    font-size: 14px;
    border: none;
    outline: none;
}
#textplaceholder::placeholder {
    color: white;
}



.description-box span {
    font-size: 18px;
    padding: 8px;
    color: #65c7d0;
}

footer {
    z-index: 1;
    background-color: rgba(55, 71, 84, 0.9);
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 80px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: white;
    align-items: center;
}

.logo {
    align-items: flex-start;
}

.logo-block {
    display: flex;
    align-items: center;
    padding-left: 20px;
}

.flogo-icon {
    height: 35px;
}

.fhead-text p {
    font-size: 20px;
    color: #ffffff;
    text-shadow: 2px 2px 3px black;
}

.copyright {
    font-size: 17px;
    color: #65c7d0;
    padding-right: 20px;
}

.cyber-table {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    background-color: rgb(0, 0, 0, 0.8);
    color: #65c7d0;
    /* text-shadow: 2px 2px 3px #65c7d0; */
    font-size: 20px;
}


.cyber-table td {
    padding: 10px;
}

.cyber-table tr :nth-child(odd) {
    background-color: rgba(55, 71, 84, 0.7);
}

.cyber-table tr :nth-child(even) {
    background-color: rgb(46, 74, 98, 0.7);
}

.thname {
    font-size: 22px;
    font-weight: normal;
    text-transform: uppercase;
    padding: 10px;
    color: #65c7d0;
    text-shadow: 2px 2px 3px black;
}

.hide-center-box {
    visibility: hidden;
}

.modal-box {
    visibility: hidden;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    background-color: rgb(0, 0, 0, 0.5);
    height: calc(100vh - 80px);
    width: 100%;
}

.modal-visible{
    visibility: visible;
}

.modal {
    height: 15vh;
    width: 40vw;
    background-color:rgba(55, 71, 84);
     display: flex;
    justify-content:center;
    align-items: center;
    flex-direction: column;
}

.modal-header {
    flex-direction: row;
    height: 60px;
    width: 100%;
    background-color: #65c7d0;
    display: flex;
    justify-content:space-between;
    align-items: center;
   
}
.modal-header p{
font-size: 30px;
font-weight: bolder;
 padding: 10px;
 color: black;
 text-shadow: 2px 2px 3px white;
}
.close-button{
   background: none;
   border: none;
   outline: none;
   padding: 10px;
}
.close-button img{
width: 50px;
}
.modal-content {
    width: 100%;
    height: calc(100% - 60px);
    display: flex;
    justify-content:center;  
    align-items: center;
    flex-direction: row;
   
}
.modal-table{
    background-color:rgb(105, 130, 163);
    color: rgb(37, 37, 37);
    width: 100%;
    height: 100%; 
    border-collapse: collapse;
    table-layout: fixed;
} 
.modal-table td{ 
    border: 1px solid #65c7d0;
    text-align: center; 
    padding: 10px;
    font-size: 18px;

}

#btnview{
 padding: 0;
}
.view{
width: 100%;
height: 100%;padding: 0;

font-size: 16px;
color: #65c7d0;
border: none;
outline: none;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="./Proekt.css" />
  <script src="./getTableParts.js" defer></script>
  <script src="./Proect.js" defer></script>
</head>

<body>
  <header>
    <div class="logo">
      <img class="logo-icon" src="./puzzle.png" alt="" />
    </div>
    <div class="head-text">
      <p>Service JSON</p>
    </div>
  </header>
  <main>
    <div class="center-box">
      <div class="description-box">
        <span>
          Сервис предназначен для преобразования JSON файла в удобную, для
          чтения таблицу. JSON может быть настолько сложным, насколько это
          необходимо, объекты и массивы могут включать другие объекты и
          массивы. </span><br />
        <span>Пожалуйста, прикрепите свой JSON файл ниже:</span>
      </div>
      <div class="textarea-box">
        <textarea id='textplaceholder'placeholder="Вставьте сюда свои данные, JSON"></textarea>
      </div>

      <div class="transformButton-box">
        <button>Трансформировать</button>
      </div>
    </div>

    <div class="table-box">
      <table class="cyber-table"></table>
    </div>
    <div class='modal-box'>
      <div class='modal' onclick = event.stopPropagation()>
        <div class='modal-header'>
          <p>ATTACHMENTS</p>
          <button class = 'close-button'>
            <img src="./krest.png" alt="">
          </button>
        </div>
        <div class='modal-content'>
          <table  class='modal-table'></table>
        </div>
      </div>
    </div>
  </main>
  <footer>
    <div class="logo-block">
      <div class="logo">
        <img class="flogo-icon" src="./puzzle.png" alt="" />
      </div>
      <div class="fhead-text">
        <p>Service JSON</p>
      </div>
    </div>
    <div class="copyright">
      <p>Copyright © 2020 BaDev All rights reserved</p>
    </div>
  </footer>
</body>
</html>