javascriptを使用してxmlを読み取りhtmlで表示したいが特定のタグだけ表示できない

Question

実現したいこと

javascriptを使用してxmlを読み取りhtmlで表示したい。

発生している問題・分からないこと

AMaxタグだけ表示できずにN/Aになる。

エラーメッセージ

UpdateTimeTags length: 1
test.html:130 AMaxTags length: 0
test.html:131 NameTags length: 1
test.html:144 aMax for index 0: N/A

該当のソースコード

<script>
async function fetchAndParseXML() {
  const xmlUrl = 'updateData3.xml'; // XMLファイルのパス
  try {
    const response = await fetch(xmlUrl);
    const xmlText = await response.text();
    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(xmlText, "application/xml");

    const updateTimeTags = xmlDoc.getElementsByTagName("UpdateTime");
    const AMaxTags = xmlDoc.getElementsByTagName("AMax");
    const nameTags = xmlDoc.getElementsByTagName("Name"); // Nameタグのデータを取得

    console.log("UpdateTimeTags length:", updateTimeTags.length); // ログ出力を追加
    console.log("AMaxTags length:", AMaxTags.length); // ログ出力を追加
    console.log("NameTags length:", nameTags.length); // ログ出力を追加

    // 最初のUpdateTimeの内容だけを表示
    if (updateTimeTags.length > 0 && nameTags.length > 0) {
      document.getElementById("first-getDate").textContent = updateTimeTags[0].textContent;
    }

    let displayHtml = "";
    for(let i = 0; i < updateTimeTags.length; i++) {
      const date = updateTimeTags[i].textContent;
      const aMax = AMaxTags[i] ? AMaxTags[i].textContent : 'N/A';
      
      // ここでaMaxの値をログ出力します。
      console.log(`aMax for index ${i}:`, aMax); // ログ出力を追加

      const name = i < nameTags.length ? nameTags[i].textContent : 'N/A';
      // 数値部分だけを解析するためparseFloatを使う
      const aMaxValue = parseFloat(aMax);
      let className = "";

      if (aMaxValue >= 0.3) {
          className = "red";
      } else if (aMaxValue >= 0.2) {
          className = "blue";
      } else if (aMaxValue >= 0.1) {
          className = "yellow";
      }

      displayHtml += `
        <div class="data-box">
          <div class="channel-name">${name}</div>
          <div class="square-frame ${className}"></div>
          <div class="a-max">${aMax}</div> <!-- 元のAMaxの文字列を表示 -->
        </div>`;
    }

    document.getElementById("data-container").innerHTML = displayHtml;
  } catch (error) {
    console.error("Error fetching XML: ", error);
  }
}

document.addEventListener('DOMContentLoaded', (event) => {
  fetchAndParseXML();
});
</script>

<clsViewData>
    <Name>わに</Name>
    <UpdateTime>2021/05/20 04:56:47</UpdateTime>
    <SelectItem>AMax</SekectItem>
    <AMax>0.000 (dB)</AMax>
  </clsViewData>

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

何度検証してもAMaxは存在しない扱いになりました。
それ以外のタグはちゃんと表示されます。

補足

特になし

Answer 1

XMLファイルの構文を見なおしてみてください。
タグ名に誤記があります。
そのため、タグが閉じきれずにAMaxが見付からないのかもしれません。

Comments

[mememe535]

ありがとうございます！
うまくいきました！

[Refrain]

タイポって意外とありますからね…
治ったようで何よりです。