Vue.js axios XML タグ内の値が取得できない

Question

Vue.js + axios でXMLの値を取得したいのですが、うまく取得できません。

<prefecture>以下のデータは取得できているのですが、
<prefecture>内の、cdとname の値を取得しようとするとundefinedと表示されます。

<prefecture>以下に<LargeArea>タグがあり、
こちらにもcd, nameがあるからでは？と思うのですが・・

<prefecture>内のcd, nameと
<LargeArea>内のcd, nameを
それぞれ取得する方法があればご教授いただけませんでしょうか。

//対象のXML

<Results xmlns="jws">
<APIVersion>1.0</APIVersion>
<Area>
<Region cd="01" name="北海道">
<Prefecture cd="010000" name="北海道">
<LargeArea cd="010200" name="札幌">...</LargeArea>
<LargeArea cd="010300" name="定山渓">...</LargeArea>
<LargeArea cd="010500" name="小樽・キロロ・積丹">...</LargeArea>

// app.js (Vue.js)
const vm = new Vue({
  el: '#app',
  data: {
    prefs: [],
    largearea: '',

  },
  methods: {
    get_location: function () {
      const request = 'ajax.php?url=http://jws.jalan.net/APICommon/AreaSearch/V1/?key=API_KEY'
      axios.get(request, {
        timeout: 3000,
        responseType: 'document'
      })
        .then(function (response) {
          const xml = response.data;
          const areas = xml.getElementsByTagName('prefecture');

          for (var i = 0; i < areas.length; i++) {

            console.log(areas[i])
            console.log(areas[i].cd)

//Chromeコンソール出力

app.js:22 <prefecture cd=​"010000" name=​"北海道">​…​</prefecture>​
app.js:23 undefined
app.js:22 <prefecture cd=​"020000" name=​"青森県">​…​</prefecture>​
app.js:23 undefined
app.js:22 <prefecture cd=​"030000" name=​"岩手県">​…​</prefecture>​
app.js:23 undefined

Answer 1

areas[i] の値と型をデバッガで確認してみてください、するとHTMLCollection型であることがわかります。

つまり、areas[i]はPrefectureという型ではなく、当然cdというメンバを持っていません。
cdにアクセスしたければ areas[i].attributes['cd'] としてください。

html要素を操作する感じでやればよいかと。

Comments

[aoki_monpro]

ありがとうございます！ デバッガで確認して console.log(areas[i].attributes[0].value) にて値取得できました。 助かりました＾＾

[退会済みユーザー]

あ、attributes['cd']の間違いでした(;_; 丸括弧にしてましたね、ごめんなさい('_';

[aoki_monpro]

いえいえ＾＾ヒントいただけて大変助かりました。