Javascript 迭代JSON数据（奇怪的结果）

我正在尝试使用JSON数据创建一个族谱，然后对其进行迭代，并在网页上显示每个家族成员的相关详细信息。问题似乎是数据在某个地方混淆了。例如，我设定了一个家庭成员死亡的日期，它被弄混了，并在错误的人下发布到了网页上

以下是我的JS代码：

function family(data) {
  var xhttp, jsonData, parsedData;

  // check that we have access to XMLHttpRequest
  if(window.XMLHttpRequest) {
    xhttp = new XMLHttpRequest();
  } else {
    // IE6, IE5
    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }

  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {

     // get the data returned from the request...
     jsonData = this.responseText;
     // ...and parse it
     parsedData = JSON.parse(jsonData);

         displayData(parsedData);

    }
  };
  xhttp.open("GET", data, true);
  xhttp.send();
}

function displayData(data) {
  var div, name, dob, died, spouse, mother, father;

  data.forEach(function(member){

    div = document.createElement('div');
    div.id = member.name.split(' ').join('-').toLowerCase();

    name = document.createElement('h1');
    name.innerText = member.name;

    dob = document.createElement('p');
    dob.innerText = member.dob;

    if(member.died !== null) {
      died = document.createElement('p');
      died.innerText = member.died;
      div.appendChild(died);
    }

    if(member.spouse !== null) {
      spouse = document.createElement('p');
      spouse.innerText = member.spouse;
    }

    if(member.parents !== null) {
      mother = document.createElement('p');
      mother.innerText = member["parents"]["mother"];
      father = document.createElement('p');
      father.innerText = member["parents"]["father"];
      div.appendChild(mother);
      div.appendChild(father);
    }

    div.appendChild(name);
    div.appendChild(dob);

    div.appendChild(spouse);


    var scriptTag = document.getElementsByTagName('script')[0];
    document.body.insertBefore(div, scriptTag);

  });

}

family('family.json');

我的JSON数据如下所示：

[
  {
    "name": "John Smith",
    "gender": "male",
    "dob": "12 August 1940",
    "died": null,
    "parents": null,
    "spouse": "Betty Smith"
  },
  {
    "name": "Betty Smith",
    "gender": "male",
    "dob": "23 September 1937",
    "died": null,
    "parents": null,
    "spouse": "John Smith"
  },
  {
    "name": "Joe Smith",
    "gender": "male",
    "dob": "14 August 1960",
    "died": "20 November 2004",
    "parents": {
      "mother": "Betty Smith",
      "father": "John Smith"
    },
    "spouse": null
  }
]

---

有没有更好的方法来构造JSON？更重要的是，我做错了什么导致应用错误的细节？我的猜测是a）因为for-in循环不包含子对象，或者它与实例有关，尽管我怀疑后者是真正的原因。在这一点上有点不知所措！任何帮助都将不胜感激。干杯

您将

姓名

、

出生日期

和

配偶

的创建和追加分开-这是您的问题

添加行

name = dob = died = spouse = mother = father = null; 

作为forEach中的第一行，代码将告诉您

函数显示数据（数据）{
var div、姓名、出生日期、死亡、配偶、母亲、父亲；
data.forEach（函数（成员）{
姓名=出生日期=死亡日期=配偶=母亲=父亲=空；
div=document.createElement（'div'）；
div.id=member.name.split（''）.join（'-'）.toLowerCase（）；
name=document.createElement（'h1'）；
name.innerText=member.name；
//console.log（“追加名称”）；
div.appendChild（名称）；
dob=document.createElement（'p'）；
dob.innerText=“出生：”+member.dob；
//console.log（“追加dob”）；
儿童部（dob）；
如果（member.dead！==null）{
died=document.createElement（'p'）；
died.innerText=“died:+member.died；
//console.log（“追加死亡”）；
儿童分部（死亡）；
}
如果（member.party！==null）{
配偶=document.createElement（'p'）；
party.innerText=“party:+member.party；
//控制台日志（“附加配偶”）；
子女（配偶）；
}
if（member.parents！==null）{
母亲=document.createElement（'p'）；
mother.innerText=“mother:+成员[“家长”][“母亲”]；
父元素=document.createElement（'p'）；
father.innerText=“父亲：+成员[“父母”][“父亲”]；
//console.log（“追加母亲”）；
儿童部（母亲）；
//console.log（“追加父项”）；
儿童部（父亲）；
}
文件.正文.附加（div）；
});
}
var testData=[
{
“姓名”：“约翰·史密斯”，
“性别”：“男性”，
“dob”：“1940年8月12日”，
“死亡”：空，
“家长”：空，
“配偶”：“贝蒂·史密斯”
},
{
“姓名”：“贝蒂·史密斯”，
“性别”：“女性”，
“dob”：“1937年9月23日”，
“死亡”：空，
“家长”：空，
“配偶”：“约翰·史密斯”
},
{
“姓名”：“乔·史密斯”，
“性别”：“男性”，
“dob”：“1960年8月14日”，
“死亡”：“2004年11月20日”，
“父母”：{
“母亲”：“贝蒂·史密斯”，
“父亲”：“约翰·史密斯”
},
“配偶”：无效
}
];
显示数据（testData）

您将

姓名

、

出生日期

和

配偶

的创建和追加分开-这是您的问题

添加行

name = dob = died = spouse = mother = father = null; 

作为forEach中的第一行，代码将告诉您

函数显示数据（数据）{
var div、姓名、出生日期、死亡、配偶、母亲、父亲；
data.forEach（函数（成员）{
姓名=出生日期=死亡日期=配偶=母亲=父亲=空；
div=document.createElement（'div'）；
div.id=member.name.split（''）.join（'-'）.toLowerCase（）；
name=document.createElement（'h1'）；
name.innerText=member.name；
//console.log（“追加名称”）；
div.appendChild（名称）；
dob=document.createElement（'p'）；
dob.innerText=“出生：”+member.dob；
//console.log（“追加dob”）；
儿童部（dob）；
如果（member.dead！==null）{
died=document.createElement（'p'）；
died.innerText=“died:+member.died；
//console.log（“追加死亡”）；
儿童分部（死亡）；
}
如果（member.party！==null）{
配偶=document.createElement（'p'）；
party.innerText=“party:+member.party；
//控制台日志（“附加配偶”）；
子女（配偶）；
}
if（member.parents！==null）{
母亲=document.createElement（'p'）；
mother.innerText=“mother:+成员[“家长”][“母亲”]；
父元素=document.createElement（'p'）；
father.innerText=“父亲：+成员[“父母”][“父亲”]；
//console.log（“追加母亲”）；
儿童部（母亲）；
//console.log（“追加父项”）；
儿童部（父亲）；
}
文件.正文.附加（div）；
});
}
var testData=[
{
“姓名”：“约翰·史密斯”，
“性别”：“男性”，
“dob”：“1940年8月12日”，
“死亡”：空，
“家长”：空，
“配偶”：“贝蒂·史密斯”
},
{
“姓名”：“贝蒂·史密斯”，
“性别”：“女性”，
“dob”：“1937年9月23日”，
“死亡”：空，
“家长”：空，
“配偶”：“约翰·史密斯”
},
{
“姓名”：“乔·史密斯”，
“性别”：“男性”，
“dob”：“1960年8月14日”，
“死亡”：“2004年11月20日”，
“父母”：{
“母亲”：“贝蒂·史密斯”，
“父亲”：“约翰·史密斯”
},
“配偶”：无效
}
];
显示数据（testData）您的顺序错误（例如：如果某人死亡，则死亡日期将打印在姓名之前（这是一个
h1
，这会令人困惑，因为它看起来像是前一个人的死亡日期）

您必须在创建元素后立即添加元素（其中
/*********/
），如下所示：

在附加之前，您甚至没有检查配偶是否存在，如果没有配偶，它将附加上一个人的配偶

为清晰起见，请尝试在属性值之前添加一个字符串，例如：

died.innerText = "Died: " + member.died;
//...
mother.innerText = "Mother: " + member["parents"]["mother"];

您的订单有误（例如：如果某人死亡，死亡日期将在