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

推薦する

Vue のデータ応答性に関する詳細な理解

目次1. ES 構文のゲッターとセッター2. ES構文でのdefineProperty 3. Vue...

Docker 経由で Spring Boot アプリケーションを公開およびデプロイするプロセスの分析

目次手動展開1.アイデアを使ってSpring Bootプロジェクトを作成する2. プロジェクトをJa...

Vue.js での $emit の使用に関する詳細な説明

1. 親コンポーネントは props を使用して子コンポーネントにデータを渡すことができます。 2....

IDEA が MySQL データベースに接続できない問題の 6 つの解決策

この記事では、IDEA が MySQL データベースに接続できない問題に対する 6 つの解決策を主に...

CSS3 は、跳ねるボール効果を実現する Web アニメーションを作成します。

基本的な準備この実装には、クラス名が ball である単純な div が必要です。 HTMLコード:...

MySQL 8.0.12 解凍バージョンのインストールチュートリアル

この記事では、MySQL 8.0.12解凍版のインストールチュートリアルを参考までに紹介します。具体...

ウェブページ作成における絶対パスと相対パスの違い

1. 絶対パスまず、ローカル コンピューターでは、ファイルの絶対パスは、当然、ハード ディスク上でフ...

WebページでjQueryを参照する方法

CDN(コンテンツ配信ネットワーク)を通じて参照できます。 jQuery は Google と Mi...

Windows 8 での ssh コマンドの使用記録

1. 仮想マシンとgit bashウィンドウを開き、接続の準備をします2. 仮想マシンでifconf...

Vueはプルダウンを実装してさらに読み込む

Element-UI に慣れた開発者なら、無限スクロールの InfiniteScroll が使いにく...

MySQL データベースの show processlist コマンドの使用の分析

実際のプロジェクト開発では、多数のクエリや挿入、特にマルチスレッド挿入など、データベースに大きな負荷...

JS ES6 変数分割代入の詳細な説明

目次1. 脱構築とは何か? 2. 配列の分割3. 配列モードと代入モードの統一4. デフォルト値の構...

JavaScript コンストラクタとプロトタイプの関係

目次1. コンストラクタとプロトタイプ1. コンストラクター2. コンストラクタ問題3. コンストラ...

display または visibility を通じて HTML 要素を表示または非表示にする

場合によっては、特定の条件に基づいて Web ページ内の HTML 要素を表示するか非表示にするかを...

macOS SierraにApache2.4+PHP7.0+MySQL5.7.16をインストールする

Mac システムには PHP と Apache が付属していますが、必要なバージョンではない場合があ...