三级数据依次取出?

  • 数据
{
   "msg": "操作成功",
   "code": 200,
   "data": [
             {
               "A": [
                     {
                        "AA": [
                            {
                                "张三": "1",
                                "李四": "2"
                            },
                           {
                                "王五": "1",
                                "赵六": "2"
                            },
                          ]
                    },
                    {
                        "BB": [
                            {
                                "钱八": "1",
                                "孙九": "2"
                            },
                           {
                                "朱十": "1",
                                "石易": "2"
                            },
                          ]
                    }
               },
               {
               "B": [
                     {
                        "CC": [
                            {
                                "黄一": "1",
                                "袁二": "2"
                            },
                           {
                                "猴子": "1",
                                "牛大": "2"
                            },
                          ]
                    }
               }
           ]
}
  • JS 代码
  // allData存放所有数据
  const allData = res.data;
  // allMapData存放所有的数据的Map类型
  const allMapData = new Map();    // {'A' => Array(2), 'B' => Array(1)}
  // second存放二级的数据的Map类型值
  const secondMapData = new Map();
  // firstTableData为双向绑定的第一个数组,secondTableData为第二个数组
  const firstTableData = allData.map((item) => {
    const keys = Object.keys(item)[0];
    allMapData.set(keys, item[keys]); // Map存值语法
    return keys;
  });
  console.log("firstTableData: ", firstTableData);   // ['A', 'B']
  // selet 点击事件之后,需要获取第一个表格的值,值为params对应数组的key
  function firstClick(params) {
    const firstMapDataArray = allMapData.get(params); // Map取值语法 first存放一级的数据的取值数组
    secondMapData.clear(); // 清空上一次赋值
    const secondTableData = firstMapDataArray.map((item) => {
      const keys = Object.keys(item)[0];
      secondMapData.set(keys, item[keys]);
      return keys;
    });
    console.log("secondMapData: ", secondMapData);
  }
  function secondClick(params) {
    const thirdTableData = secondMapData.get(params);
    console.log("thirdTableData: ", thirdTableData);
  }
  firstClick("A");     // ['AA ', 'BB']
  secondClick("AA");   //'AA'的两个数组
posted @ 2022-11-16 14:41  master女士  阅读(33)  评论(0)    收藏  举报