Question

我尝试使用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循环不包含子对象，或者它与实例有关，但我怀疑后者是真正的原因。在这一点上有点不知所措！任何帮助，将不胜感激。干杯

Answer 1

您分开了name，dob和spouse的创建和追加 - 这就是您的问题。

添加行

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

作为forEach内的第一行 - 代码会告诉你。

function displayData(data) {
  var div, name, dob, died, spouse, mother, father;

  data.forEach(function(member){

    name = dob = died = spouse = mother = father = null;
    
    div = document.createElement('div');
    div.id = member.name.split(' ').join('-').toLowerCase();

    name = document.createElement('h1');
    name.innerText = member.name;
    //console.log("append name");
    div.appendChild(name);

    dob = document.createElement('p');
    dob.innerText = "Born: " + member.dob;
    //console.log("append dob");
    div.appendChild(dob);

    if(member.died !== null) {
      died = document.createElement('p');
      died.innerText = "Died: " + member.died;
      //console.log("append died");
      div.appendChild(died);
    }

    if(member.spouse !== null) {
      spouse = document.createElement('p');
      spouse.innerText = "Spouse: " + member.spouse;
      //console.log("append spouse");
      div.appendChild(spouse);
    }

    if(member.parents !== null) {
      mother = document.createElement('p');
      mother.innerText = "Mother: " + member["parents"]["mother"];
      father = document.createElement('p');
      father.innerText = "Father: " + member["parents"]["father"];
      //console.log("append mother");
      div.appendChild(mother);
      //console.log("append father");
      div.appendChild(father);
    }

    document.body.append(div);

  });

}

var testData = [
  {
    "name": "John Smith",
    "gender": "male",
    "dob": "12 August 1940",
    "died": null,
    "parents": null,
    "spouse": "Betty Smith"
  },
  {
    "name": "Betty Smith",
    "gender": "female",
    "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
  }
];

displayData(testData);

Answer 2

你的订单是错的（例如：如果一个人死了，死亡日期将打印在名字之前（这是一个h1，这会让人感到困惑，因为它看起来像是死亡日期属于前一个人）。

您必须在创建元素之后附加元素（/********/），如：

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

name = document.createElement('h1');
name.innerText = member.name;
/********************/
div.appendChild(name);

dob = document.createElement('p');
dob.innerText = member.dob;
/*******************/
div.appendChild(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;
  /*****************/
  div.append(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);
}

在追加配偶之前你甚至没有检查配偶是否存在，如果没有配偶，它会追加前一个人的配偶。

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

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

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

2 个答案: