質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.59%

Vue.js axios XML取得しようとすると HTMLCollectionが空 TypeError: 'caller', 'callee', and 'arguments' properties

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,941

aoki_monpro

score 45

先日下記投稿をさせていただき、とあるAPI URLからXML取得できるようになったのですが、

https://teratail.com/questions/154917

別のAPI URL を取得しようとしたところ、HTMLCollectionが空で取得され、

デバッガでargumentsを見ると、

TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
at Function.remoteFunction (<anonymous>:2:14)

と表示されています。

いくつかググってみて、 'use strict' をつけたり外したりしてみたものの変わらず・・

データ取得する方法がないか、ご教授いただけませんでしょうか。。

//対象XML 一部
//

<Results xmlns="jws">
<NumberOfResults>10</NumberOfResults>
<DisplayPerPage>1</DisplayPerPage>
<DisplayFrom>1</DisplayFrom>
<APIVersion>1.3</APIVersion>
<Hotel>
<HotelID>300624</HotelID>
<HotelName>天空の城三宜亭本館</HotelName>
<PostCode>395-0034</PostCode>
<HotelAddress>長野県飯田市追手町2-641-10</HotelAddress>
<Area>
<Region>甲信越</Region>
<Prefecture>長野県</Prefecture>
<LargeArea>伊那・駒ヶ根・飯田・昼神</LargeArea>
<SmallArea>飯田・天竜峡</SmallArea>
</Area>
<HotelType>旅館</HotelType>
<HotelDetailURL>
// 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/APILite/HotelSearch/V1/?key=API_KEY&pref=160000&l_area=162600&s_area=162612&h_type=1&start=1&count=1'
      axios.get(request, {
        timeout: 30000,
        responseType: 'document'
      })
        .then(function (response) {
          const xml = response.data;
          const areas = xml.getElementsByTagName('hotel');
          console.log(areas)

頂いたコメントをもとに追記いたします。

こちらのブログを参考に設定していまして、クロスドメイン制約は下記で対応していると思っているのですが、不足あるかもしれません。

参考ブログ Vue.js と Ajax でお天気アプリっぽいのを作ってみた

// ajax.php
<?php
  if(isset($_GET["url"]) && preg_match("/^https?:/",$_GET["url"])){
    $data = file_get_contents($_GET["url"]);
    $data = mb_convert_encoding($data, 'UTF8', 'ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN');
    echo $data;
  }else{
    echo "error";
  }
// index.html
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
    crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">

  <title>APIテスト</title>
</head>

<body>
  <div id="app">

    <div class="app-header">
      <h1>施設情報</h1>

      <div>
        エリアを選択:
        <select class="form-control" v-model="largearea" v-on:change="get_largearea(largearea)">
          <option v-for="item in prefs" v-bind:value="item.cd">{{ item.large_name }}</option>
        </select>
      </div>
    </div>


  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
    crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
    crossorigin="anonymous"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://unpkg.com/vue"></script>
  <script src=".config.js"></script>
  <script src="app.js"></script>
</body>

</html>

エラー箇所

イメージ説明

hotelのHを大文字にしても変わらずでした。。
const areas = xml.getElementsByTagName('Hotel');

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • rrt

    2018/10/30 11:52

    クロスドメイン制約は回避できているんでしょうか?

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2018/10/30 12:03

    できればパッと試せるように、実行できる最小のコードを示していただけると回答しやすいです。

    キャンセル

  • aoki_monpro

    2018/10/30 12:35

    ありがとうございます、追記させていただきました。

    キャンセル

回答 1

checkベストアンサー

0

エラーについては、エラーが出ている箇所を特定してください。
別ファイルの可能性もあります。

また、データの取得自体は問題ありません。
Hotelとすべきところを、hotelとしているので取得できていません。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/31 16:14

    ググりまくって、こちらの記事で取得できました、勉強になりました。アドバイスありがとうございます。 https://qiita.com/unotovive/items/4ec890765de205c30228

    キャンセル

  • 2018/10/31 16:19

    解決したみたいでよかったです('0'* ただ少し気になるのが、ほかのコードなら動いているにもかかわらず、今回の場合だけクロスドメイン問題が出てくるのは結構謎です。

    キャンセル

  • 2018/10/31 16:24

    そうなんですよね・・違いとしたらURLクエリありなしかな?と思いつつ まだ根本原因わからずです。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.59%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • トップ
  • XMLに関する質問
  • Vue.js axios XML取得しようとすると HTMLCollectionが空 TypeError: 'caller', 'callee', and 'arguments' properties