“类型错误：无法读取未定义的属性‘0’”，我不知道为什么”

Question

我开始使用 JavaScript 编程，但我真的无法理解这个错误。 我正在尝试制作一个网站，它是一个表单选择和两个按钮。一键即可 将 Json 端的数据加载到变量中。使用另一个按钮，您可以从 人进入表格选择。当您在表单中选择一个人时，应该会出现一个包含该人所有信息的表格。

有人可以帮助我并解释问题所在。 是否有更好的方法将 html 信息保存到 javascript 变量中。 提前致谢！

代码如下：

let json;
let FormValue = 0;

let HtmlTable =     '<table>'+
                      '<tr>'+
                        '<td>name</td>'+
                        '<td>'+loadFromServer()[FormValue].name+'</td>'+
                      '</tr>'+
                      '<tr>'+
                        '<td>gender</td>'+
                        '<td>loadFromServer()[FormValue].gender</td>'+
                      '</tr>'+
                      '<tr>'+
                        '<td>age</td>'+
                        '<td>loadFromServer()[FormValue].age</td>'+
                      '</tr>'+
                      '<tr>'+
                        '<td>eyeColor</td>'+
                        '<td>loadFromServer()[FormValue].eyeColor</td>'+
                      '</tr>'+
                      '<tr>'+
                        '<td>phone</td>'+
                        '<td>loadFromServer()[FormValue].phone</td>'+
                      '</tr>'+
                      '<tr>'+
                        '<td>email</td>'+
                        '<td>loadFromServer()[FormValue].email</td>'+
                      '</tr>'+
                      '<tr>'+
                        '<td>address</td>'+
                        '<td>loadFromServer()[FormValue].address</td>'+
                      '</tr>'+
                    '</table>';

function loadFromServer() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
      json = this.responseText;
      json = JSON.parse(json);
    }
    };
  xhttp.open("GET", "http://www.json-generator.com/api/json/get/ckpLoZtkLC?indent=2", true);
  xhttp.send();

  return json;
}

function loadIntoForm() {
    //console.info(loadFromServer());
    
    for(let i = 0; i < loadFromServer().length; i++){
        var x = document.createElement("OPTION");
        x.setAttribute("value", loadFromServer()[i].index);
        
        document.getElementById("FormCustomers").addEventListener('change', function() {
            FormValue = this.value;
            console.log('FormValue: ', FormValue);
            loadData();
        });
        
        
        //x.setAttribute("onclick", loadData());
        //x.onselect(loadData());
        var t = document.createTextNode(loadFromServer()[i].name);
        x.appendChild(t);
        document.getElementById("FormCustomers").appendChild(x);
    }
}

function loadData(){
    if(FormValue >= 0){
        document.getElementById("replace").innerHTML = HtmlTable;

    }
}