Vue の foreach 配列と js の traversal 配列の書き方の説明

Vue の foreach 配列と js の traversal 配列の書き方の説明

Vue foreach配列を記述し、jsで配列をトラバースする方法

シナリオ

VueでAxiosを使用してgetまたはpostリクエストを送信します。リクエストを送信するときは、jsを使用する必要があります。

リクエストパラメータを走査して処理します。

応答を受信すると、応答結果を走査して処理する必要があります。

Vue と JS の foreach 配列の違いに注意してください。

成し遂げる

js で配列を反復処理する

//シフトの詳細配列を定義します var bcglxiangxiList = new Array();
  //シフト詳細オブジェクトを定義します var bcxiangxi = {};
  // パラメータをループする bcglXiangXiListParam.forEach(element => {
    bcxiangxi.xh = 要素.xh;
    bcxiangxi.bcbh = データ.bcbh;
    bcxiangxi.dkkssj = 要素.sjfw[0];
    bcxiangxi.dkjssj = 要素.sjfw[1];
    bcxiangxi.ts = 要素.ts;
    bcxiangxi.dkdd = 要素.dkdd;
    bcxiangxi.zxjxljsj = 要素.jxsjfw[0];
    bcxiangxi.zdjxljsj = 要素.jxsjfw[1];
    //シフト詳細オブジェクトをシフト詳細配列に格納します bcglxiangxiList.push(bcxiangxi);
  });

Vue で配列を反復処理する

 var bcglxiangxiList = 新しい配列();
        var bcxiangxi = {};
        デバッガ;
        もし (
          応答.data.bcglXiangXiList != null &&
          応答.data.bcglXiangXiList.長さ > 0
        ){
          console.log(応答データ.bcglXiangXiList);
          response.data.bcglXiangXiList.forEach((item, index) => {
            console.log(アイテム);
            bcxiangxi.xh = アイテム.xh;
            bcxiangxi.bcbh = アイテム.bcbh;
            //デバッガ
            bcxiangxi.sjfw = 新しい配列();
            bcxiangxi.sjfw[0] = アイテム.dkkssj;
            bcxiangxi.sjfw[1] = アイテム.dkjssj;
            bcxiangxi.ts = アイテム.ts;
            bcxiangxi.dkdd = アイテム.dkdd;
            bcxiangxi.jxsjfw = 新しい配列();
            bcxiangxi.jxsjfw[0] = アイテム.zxjxljsj;
            bcxiangxi.jxsjfw[1] = アイテム.zdjxljsj;
            bcglxiangxiList.push(bcxiangxi);
          });
        }

トラバーサルメソッドは同じであることがわかります。js では、2 つのパラメータを持つトラバーサルメソッドを使用することもできます。

  //シフトの詳細配列を定義します var bcglxiangxiList = new Array();
  //シフト詳細オブジェクトを定義します var bcxiangxi = {};
  // パラメータをループする bcglXiangXiListParam.forEach((element,index) => {
    bcxiangxi.xh = 要素.xh;
    bcxiangxi.bcbh = データ.bcbh;
    bcxiangxi.dkkssj = 要素.sjfw[0];
    bcxiangxi.dkjssj = 要素.sjfw[1];
    bcxiangxi.ts = 要素.ts;
    bcxiangxi.dkdd = 要素.dkdd;
    bcxiangxi.zxjxljsj = 要素.jxsjfw[0];
    bcxiangxi.zdjxljsj = 要素.jxsjfw[1];
    //シフト詳細オブジェクトをシフト詳細配列に格納します bcglxiangxiList.push(bcxiangxi);
  });

vue forEach ループの使用法

//データはコレクションです data.forEach(function(item, index) {
            //item はその日にループされるオブジェクトです //index は 0 から始まるループ インデックスです})

上記は私の個人的な経験です。参考になれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue forEachループ配列を使用して必要なデータを取得します
  • Vue 配列トラバーサルメソッド forEach と map の原理分析と実用的応用の詳細な説明
  • Vue が学ぶべき知識ポイント: forEach() の使用

<<:  Mysql トランザクション分離レベルの読み取りコミットの詳細な説明

>>:  Linux の grep コマンドと egrep コマンドの詳細な説明

推薦する

Docker Compose ネットワーク設定の説明

基本概念デフォルトでは、Compose はアプリケーション用のネットワークを作成し、サービスの各コン...

TomcatコンポーネントはWebサーバーのアーキテクチャの進化を示しています

1. tomcat とは誰ですか? 2. Tomcat は何ができますか? Tomcat は Web...

MySQL SELECT文の実行方法

MySQL Select ステートメントはどのように実行されますか?最近、Geek Time で D...

vue-video-player でのブレークポイント再開の実装

最近のプロジェクトでは、ブレークポイントからビデオの再生を再開する機能を実装する必要がありました。こ...

mysql5.6 マスタースレーブ設定と非同期の問題の詳細な説明

目次1. MySQL マスタースレーブレプリケーションの原理2. MySQLのコンパイルとインストー...

今日と昨日の 0:00 タイムスタンプを取得する MySQL の例

以下のように表示されます。昨日: UNIX_TIMESTAMP(CAST(SYSDATE() AS ...

JavaScript配列の簡単な紹介

目次配列の紹介配列リテラル2次元配列要約する配列の紹介配列- Arrayもオブジェクトですこれは通常...

SpringBootはActiviti7実装コードを統合する

Activiti7 の正式リリース以降、SpringBoot2.x との統合開発を全面的にサポートし...

小さなページングデザイン

ユーザーが目的のものを探すために前進するか後退するかを選択できるようにします。たとえば、Taobao...

Linux での stat 関数と stat コマンドの使用法の詳細な説明

stat 関数と stat コマンドLinux ファイル内の [inode = インデックス ノード...

jQueryはすべての選択と逆選択操作ケースを実装します

この記事では、全選択と逆選択操作を実装するためのjQueryの具体的なコードを参考までに共有します。...

Linux ソースコードからのソケット (TCP) クライアント側での接続の例の詳細な説明

序文著者は、アプリケーションからフレームワーク、オペレーティング システムに至るまで、あらゆるコード...

get メソッドによる HTML フォームの値転送の例

google.htmlインターフェースは図の通りですコードは図のとおりです: (比較的シンプルで、入...

フレックスレイアウトを使用してページレイアウトを簡単に実装するためのサンプルコード

では、早速コードを見てみましょう。 1. 上部、中央、下部のレイアウト: <!DOCTYPE ...

Linux で pip 操作中にタイムアウトが発生する問題を解決する方法

Linuxインスタンスでpipを使用する際のタイムアウト問題を解決する方法pip は最も人気のある ...