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 コマンドの詳細な説明

推薦する

JavaScript 配列重複排除問題の詳細な研究

目次序文 👀リサーチを始めましょう🐱‍🏍オリジナル🧶 indexOf を使用した元の方法の最適化 ✍...

MySQLでカンマ区切り値の列を列に変換する方法

序文場合によっては、第 1 正規形設計パターンに従わないビジネス テーブルに遭遇することがあります。...

この記事では、CSSのようなJSモジュールをインポートする方法を説明します。

目次序文構築可能なスタイルシートとは何ですか? CSSモジュールスクリプトの使用インポートアサーショ...

CSSはリモコンのボタンを模倣する

注: このデモはミニプログラム環境でテストされており、他の h5 および pc Web ページにも適...

Linux 上の MySQL 5.7 でパスワードを忘れる問題を解決する

1. 問題Linux 上の mysql5.7 のパスワードを忘れました2. 解決策• ステップ 1:...

Vueを使用して手書き署名機能を実装する

個人的な実装のスクリーンショット:インストール: npm インストール vue-esign --sa...

MySQLのユーザー管理とPostgreSQLのユーザー管理の違い

1. MySQL ユーザー管理[例1.1] ローカルMySQLサーバーのテストデータベースにroot...

2048 ゲームを実装するためのネイティブ js

2048ミニゲーム、参考までに具体的な内容は以下のとおりですまず、2048ゲームは16のグリッドか...

Linux DHCPサービスの詳細な説明

目次1. DHCP サービス (動的ホスト構成プロトコル) 1. 背景2. 概要3. 利点4.DHC...

数百万のデータに対して MySQL クエリを最適化する 4 つの方法

目次1. 時間が経つにつれて限界が遅くなる理由2. 百万データシミュレーション1. 従業員テーブルと...

JS デコレータ パターンと TypeScript デコレータ

目次デコレータパターンの紹介TypeScript のデコレータデコレータの使用デコレーターファクトリ...

el-table のテーブルを最適化するために仮想リストを使用する方法についての簡単な説明

目次序文解決具体的な実装満たすべき前提条件質問序文テーブルをよく使用します。データ量が多い場合は直接...

MySQL スケジュールバックアップタスクの簡単な分析

導入実稼働環境では、データの損失を回避するために、通常、データベースは定期的にバックアップされます。...

Ubuntu 18.04 のログインループ/ブートインターフェイスで停止/グラフィカルインターフェイスに入ることができない問題を解決する方法

原因: NVIDIA グラフィック カード ドライバーが破損している解決:コマンドラインモードで再起...

位置固定オフセット問題を解決する方法の詳細な説明

質問CSS 固定配置の position:fixed は非常に使いやすいです。ブラウザのビューポート...