尝试从XML文件中检索数据时，无法读取未定义的属性“childNodes”

Given this code,

鉴于此代码,

<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
</style>
<body>


<form>
  <input type="text" id="word" value=""/>
  <button type="button" onclick="loadDoc()">Retrieve data</button>
  <br>

</form>

<br><br>
<table id="demo"></table>



<script type="text/javascript">// <![CDATA[
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      myFunction(xhttp);
    }
  };
  xhttp.open("GET", "URL" + $('#word').val(), true);
  xhttp.send();
}

function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table="<tr><th>Japanese</th><th>Pronunciation</th><th>English</th></tr>";
  var x = xmlDoc.getElementsByTagName("json");

  for (i = 0; i <x.length; i++) { 
    table += "<tr><td>" +
    x[i].getElementsByTagName("japanese")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("pronunciation")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("english")[0].childNodes[0].nodeValue +
    "</td>" + " " + "</tr>";
  }

  document.getElementById("demo").innerHTML = table;
}
// ]]></script>

How could I skip the "pronunciation" tag whenever it has no value?

如果没有价值,我怎么能跳过“发音”标签呢?

To be a little more specific, my XML file has different tags - "japanese" (a word or kanji), "pronunciation" (how the word is read, in hiragana, and only has a value when it's a kanji) and "english" (meaning of the word).

更具体一点,我的XML文件有不同的标签 - “日语”(一个单词或汉字),“发音”(如何读取这个单词,在平假名中,只有当它是一个汉字时才有值)和“英语” “(这个词的意思)。

The current code does not work whenever a value is missing for the "pronunciation" tag, which means that every single word without a pronunciation will cause the site not to display anything.

当“发音”标签缺少值时,当前代码不起作用,这意味着没有发音的每个单词都会导致网站不显示任何内容。

XML File:

<json> //This entry has pronunciation
<japanese>原爆</japanese>
<pos>n</pos>
<pronunciation>げんばく</pronunciation>
<english>(abbr) (See 原子爆弾) atomic bomb A-bomb</english>
</json>
<json> //This entry does not have pronunciation as it is not needed
<japanese>ダム</japanese>
<pos>n</pos>
<english>dam/(adj-f)</english>
<english>dumb</english>
</json>

Thanks!

1 个解决方案

#1

From your sample data, the pronunciation element is completely omitted when not needed. So getElementsByTagName("pronunciation") returns undefined, and because of that, you can't get [0] from it.

根据您的示例数据,在不需要时完全省略发音元素。所以getElementsByTagName(“发音”)返回undefined,因此,你不能从中得到[0]。

You can test what comes back and respond appropriately, like this:

您可以测试返回的内容并做出适当的响应,如下所示:

var pron = getElementsByTagName("pronunciation");
if (pron) { table += pron[0].childNodes[0].nodeValue; }

This assumes you split the one long assignment to 'table', into separate parts. In general, you may find it useful to factor this out into a function like:

这假设您将一个长分配拆分为“表”,分成不同的部分。通常,您可能会发现将其分解为以下函数非常有用:

function getOptionalContentAsTD(ename) {
    var el = getElementsByTagName(ename);
    var txt = "";
    if (el) { txt = el[0].childNodes[0].nodeValue; }
    return("<td>" + txt + "</td>");
}

I didn't test this, so there's probably a typo, but it's gives the idea.

我没有测试这个,所以可能有一个错字,但它给出了这个想法。

Hope that helps.

希望有所帮助。

#1