ajax呼び出しからjsonを入力した後、スクリプト内のデータ変数にアクセスできません

クリス

今日はVueを試していて、歩く前に走ろうとしていたので、たまに壁にぶつかりました。以前にいくつか質問をしましたが、別の質問に戻りました。

私が最後に尋ねた質問は、「スクリプトではデータ変数にアクセスできませんが、htmlではアクセスできます」でした。問題はタイプミスでした。そのタイプミスが修正されると、スクリプトで配列を入力したデータ変数にアクセスできましたが、ajaxとpromiseを使用してデータ変数を入力する際に​​問題が発生しましたが、 htmlの場合、スクリプト内の変数のデータにアクセスできず、タイプミスがないことを再確認しました。

私が理解していないのは、json文字列がローカル変数にある場合、上記のデータ変数にアクセスできるが、ajaxを使用してデータが入力された後はアクセスできない理由です。

エラーが発生し、変数にアクセスできなくなりました...

これが私のajax呼び出しです:

GetItemPriceListByID: (whichOne) => {
    return $.ajax({
        type: "GET",
        url: "../Scripts/" + whichOne + "JSON.json",
        dataType: "json"
    });
}

これが返されるJSONのコピーです

[
  {
    "CatalogName": "Retro Doors",
    "ItemName": "French Doors",
    "ItemListPrice": "$461.00",
    "ItemType": "Oak",
    "ItemFeatures": [
      {
        "Features": "Door Quantity",
        "QTY": 2
      },
      {
        "Features": "Door Hinges",
        "QTY": 4
      },
      {
        "Features": "Door Knobs",
        "QTY": 1
      },
      {
        "Features": "Door Looks",
        "QTY": 1
      },
      {
        "Features": "Glass Panes",
        "QTY": 2
      }
    ]
  }
]

HTML:{{item.CatalogName}} {{items.Features}}

スクリプト:

new Vue({
        el: '#app',
        beforeCreate: function () {
            console.log("Before Created");
        },
        created: function () {
            console.log("Created");
            this.GetItemsList();
        },
        beforeMount: function () {
            console.log("Before Mount");
        },
        data: {
            itemPriceList: []
        },
        methods: {
            GetItemsList() {
                this.itemPriceList = CommonFunctions.GetItemPriceListByID("ItemList")
                    .done(data => {
                        this.itemPriceList = data;
                        console.log("Completed")
                    }); //result;
            }
        },
        mounted: function () {
            console.log("Mounted");
            console.log(this.itemPriceList[0].CatalogName);
        }
    });

これで発生するエラー(実行した場合、CatalogNameはHTMLに表示されます)

エラー画像

**編集**

console.log

Boussadjra Brahim

データオブジェクトにitemPromiseというプロパティを追加します

   GetItemsList() { 
          this.itemPromise = CommonFunctions.GetItemPriceListByID("ItemList").done(); 
     }

マウントされたフックにこれを追加します:

    this.itemPromise.then((res)=>{this.itemPriceList=res})

更新

createdフック我々は呼び出すことにより、プロミスオブジェクトを作成したGetItemsList()とするその約束を割り当てるitemPromiseには、プロパティmounted我々が使用するフックitemPromise.then(res=>{...})私たちに結果を代入するitemPriceListプロパティ

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

Firebaseの呼び出し後に変数にアクセスできません

分類Dev

その入力をJSONに動的に保存した後、JSONファイルからテキストエリアにデータを呼び出します

分類Dev

AngularFireStoreにアップロードした後、getDownloadUrl()内から変数にアクセスできません

分類Dev

BASHスクリプトの関数内で呼び出したときにSUDOが見つかりません

分類Dev

Typescriptでスーパーコンストラクターを呼び出した後、子クラスインスタンスからプロパティにアクセスできません

分類Dev

this()で呼び出した後、コンストラクター変数を使用できません

分類Dev

Redux-コンテナのプロパティにアクセスして、APIクレデンシャル(ストアから)をコンテナコンポーネントの呼び出し関数に渡すことができません

分類Dev

ISP(新しいルーター)を変更した後、ネットワーク内からサーバーにアクセスできません

分類Dev

Angularjsの別のアプリによって行われたAPI呼び出しからデータにアクセスできますか?

分類Dev

Lambda関数は呼び出し元関数のインポートにアクセスできませんか?

分類Dev

インターセプターの呼び出し後、Struts 2アクション変数に値が入力されません。invoke()

分類Dev

ビューのクエリセットに値を追加した後、モデルのカスタム関数にアクセスできません

分類Dev

サブクラスインスタンスを介して自身のクラスからプライベート変数にアクセスできません

分類Dev

`operator new`を明示的に呼び出した後、オブジェクトの関数にアクセスできません

分類Dev

スクリプト呼び出しからの変数をスクリプトbash内の文字列に挿入します

分類Dev

jQueryの自己呼び出し関数は変数にアクセスできませんか?

分類Dev

マップループ内のAxios呼び出しの値にアクセスできません

分類Dev

入力変数は表示されますが、Ajax、$ each、およびDivクローンプロセスの後でアクセスできません

分類Dev

コンストラクター内からプライベート メソッドを呼び出しても、変数の値は変更されません

分類Dev

Pythonから呼び出されたスクリプトによってエクスポートされた変数にアクセスします

分類Dev

Javascriptの呼び出しを使用して変数にアクセスできません

分類Dev

JSONからデータを取得しましたが、JSONobjectからArraylistにアクセスできません

分類Dev

CloudformationのEC2インスタンスからS3にアクセスできません-HeadObject操作の呼び出し中にクライアントエラー(301)が発生しました:永続的に移動しました

分類Dev

djangoのajax呼び出しに複数のクエリのデータを送信できません

分類Dev

aspページへのAJAX呼び出しを使用してから、ページから返されたJSONデータを使用して、選択ボックスにオプションを入力します

分類Dev

iOS 9.3.5 URLスキームを追加した後、アプリからインターネットにアクセスできません

分類Dev

1つのスクリプト内の複数の入力フィールドからのjQueryAJAX呼び出し

分類Dev

Toadを呼び出し、コマンドラインからクエリファイルを実行しました。結果データセットを自動的にエクスポートできません

分類Dev

データを書き込むために Beanshell スクリプトを使用して DB に HTTPS 呼び出しを行うことができません

Related 関連記事

  1. 1

    Firebaseの呼び出し後に変数にアクセスできません

  2. 2

    その入力をJSONに動的に保存した後、JSONファイルからテキストエリアにデータを呼び出します

  3. 3

    AngularFireStoreにアップロードした後、getDownloadUrl()内から変数にアクセスできません

  4. 4

    BASHスクリプトの関数内で呼び出したときにSUDOが見つかりません

  5. 5

    Typescriptでスーパーコンストラクターを呼び出した後、子クラスインスタンスからプロパティにアクセスできません

  6. 6

    this()で呼び出した後、コンストラクター変数を使用できません

  7. 7

    Redux-コンテナのプロパティにアクセスして、APIクレデンシャル(ストアから)をコンテナコンポーネントの呼び出し関数に渡すことができません

  8. 8

    ISP(新しいルーター)を変更した後、ネットワーク内からサーバーにアクセスできません

  9. 9

    Angularjsの別のアプリによって行われたAPI呼び出しからデータにアクセスできますか?

  10. 10

    Lambda関数は呼び出し元関数のインポートにアクセスできませんか?

  11. 11

    インターセプターの呼び出し後、Struts 2アクション変数に値が入力されません。invoke()

  12. 12

    ビューのクエリセットに値を追加した後、モデルのカスタム関数にアクセスできません

  13. 13

    サブクラスインスタンスを介して自身のクラスからプライベート変数にアクセスできません

  14. 14

    `operator new`を明示的に呼び出した後、オブジェクトの関数にアクセスできません

  15. 15

    スクリプト呼び出しからの変数をスクリプトbash内の文字列に挿入します

  16. 16

    jQueryの自己呼び出し関数は変数にアクセスできませんか?

  17. 17

    マップループ内のAxios呼び出しの値にアクセスできません

  18. 18

    入力変数は表示されますが、Ajax、$ each、およびDivクローンプロセスの後でアクセスできません

  19. 19

    コンストラクター内からプライベート メソッドを呼び出しても、変数の値は変更されません

  20. 20

    Pythonから呼び出されたスクリプトによってエクスポートされた変数にアクセスします

  21. 21

    Javascriptの呼び出しを使用して変数にアクセスできません

  22. 22

    JSONからデータを取得しましたが、JSONobjectからArraylistにアクセスできません

  23. 23

    CloudformationのEC2インスタンスからS3にアクセスできません-HeadObject操作の呼び出し中にクライアントエラー(301)が発生しました:永続的に移動しました

  24. 24

    djangoのajax呼び出しに複数のクエリのデータを送信できません

  25. 25

    aspページへのAJAX呼び出しを使用してから、ページから返されたJSONデータを使用して、選択ボックスにオプションを入力します

  26. 26

    iOS 9.3.5 URLスキームを追加した後、アプリからインターネットにアクセスできません

  27. 27

    1つのスクリプト内の複数の入力フィールドからのjQueryAJAX呼び出し

  28. 28

    Toadを呼び出し、コマンドラインからクエリファイルを実行しました。結果データセットを自動的にエクスポートできません

  29. 29

    データを書き込むために Beanshell スクリプトを使用して DB に HTTPS 呼び出しを行うことができません

ホットタグ

アーカイブ