Javascript 如何在表上显示此数据？

我正在构建一个vue js应用程序，并试图用这样的数据构建一个html表

{Header}: 
 {
   {Subheader}: {
       2021-05-26 00:09: [1, 2, 3]
       2021-05-26 00:13: [10]
       2021-05-26 00:16: [6]
{Header}
   {Subheader}: {
       2021-05-26 00:09: [2, 6, 1]
       2021-05-26 00:13: [50]
       2021-05-26 00:16: [10]
{Header}
   {Subheader}: {
       2021-05-26 00:09: [4]
       2021-05-26 00:13: [5, 5, 8]
       2021-05-26 00:16: [4]

   ...

现在标题和副标题可以是任何东西这就是为什么我把它放在括号里的原因，诀窍是显示标题，然后colspan它，这样它就可以匹配它自己的副标题的长度，最后在每一行放上副标题值中的对应项，这样它就会像上面的例子一样

|      Header       | Header  |
|Subheader|Subheader|Subheader|
|    1    |    2    |    4    |
|    2    |    6    |    5    |
|    3    |    1    |    5    |
|   10    |   50    |    8    |
|    6    |   10    |    4    |

这是我到目前为止的vue.js代码

<template>
    <div ref="main" class="relative h-full pt-10 analytics">
        <table class="w-full" v-if="fullCycle">
            <thead>
                <tr>
                    <th class="border" :colspan="Object.values(header).length" v-for="(header, i) in fullCycle" :key="i">
                        {{ i }}
                    </th>
                </tr>
                <tr>
                    <th class="border" v-for="(item, index) in getSubValues(fullCycle)" :key="index">
                        {{ item }}
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, i) of getThirdLevel()" :key="i">
                    <td class="border" v-for="(val, index) in item" :key="index">{{ val }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>

export default {
    data() {
        return {
            fullCycle: null,
        };
    },
    mounted() {
        this.init();
    },
    methods: {
        async init() {
            await this.fetchData();
        },
        async fetchData() {
            try {
                const res = await this.$axios.get('/redacted/cool-api');
                this.fullCycle = res.data;
            } catch (err) {
                console.log(err);
            }
        },
        getSubValues(obj) {
            const values = [];

            for (const item of Object.keys(obj)) {
                for (const index in obj[item]) {
                    values.push(index);
                }
            }

            return values;
        },
        getThirdLevel() {
            const obj = this.fullCycle;
            const levelTwoLength = this.getSubValues(obj).length;
            const values = [];

            for (const item of Object.keys(obj)) {
                for (const index of Object.keys(obj[item])) {
                    values.push(Object.values(obj[item][index]));
                }
            }

            let max = 0;
            for (const item of values) {
                if (max < item.length) max = item.length;
            }
            let iterator = 0;

            let finalArray = [];
            for (const item of values) {
                for (let i = 0; i < max; i++) {
                    console.log(item[i]);
                    if (item[i]) {
                        for (let val of item[i]) {
                            if (!finalArray[iterator]) finalArray[iterator] = [];
                            finalArray[iterator].push(val ? val : '');
                            if (finalArray[iterator].length === levelTwoLength) iterator++;
                        }
                    } else {
                        if (!finalArray[iterator]) finalArray[iterator] = [];
                        finalArray[iterator].push('');
                        if (finalArray[iterator].length === levelTwoLength) iterator++;
                    }
                }
            }

            return finalArray;
        },
    },
};
</script>

{{i}
{{item}}
{{val}}
导出默认值{
数据（）{
返回{
fullCycle:null，
};
},
安装的（）{
this.init（）；
},
方法：{
异步初始化（）{
等待此消息。fetchData（）；
},
异步获取数据（）{
试一试{
const res=wait this.$axios.get（'/redacted/cool api'）；
this.fullCycle=res.data；
}捕捉（错误）{
控制台日志（err）；
}
},
获取子值（obj）{
常量值=[]；
用于（对象的常量项。键（obj））{
for（对象[项目]中的常量索引）{
值。推送（索引）；
}
}
返回值；
},
getThirdLevel（）{
const obj=this.fullCycle；
const leveltwolegth=this.getSubValues（obj）.length；
常量值=[]；
用于（对象的常量项。键（obj））{
for（Object.key的常量索引（obj[item]））{
value.push（Object.values（obj[项目][索引]）；
}
}
设max=0；
用于（常量值项）{
如果（最大<项目长度）最大=项目长度；
}
设迭代器=0；
设finalArray=[]；
用于（常量值项）{
for（设i=0；i

现在，上面的代码有些工作，但问题是，因为每天可能有许多项目，它将它们并排放置，而不是从上到下。

finalArray

是一个新创建的多维数组，它是通过循环每个子标题的每个值并通过总子标题长度限制它来构建的，基本上将它推到一个新的子标题中。同样，每个标题、子标题和日期可以不同。每个标题可以有多个子标题

---

谢谢你

在经历了不眠之夜的黑暗魔法之后，我成功地重建了初始阵列并将其返回到方法中。查看评论以查看详细信息

getThirdLevel() {
    // Our initial object
    const obj = this.fullCycle;

    // An empty object to reconstruct so it will have first level as second level and each value of the fourth one pushed into it
    const reconstruct = [];

    // Iteration for level two, so we can determine where the value of the fourth one will go
    let levelTwoIteration = 0;
    // Level one
    for (const indexOne of Object.keys(obj)) {
        // Level two
        for (const indexTwo of Object.keys(obj[indexOne])) {
            reconstruct[levelTwoIteration] = [];

            // Sorted level three because Object.keys break the order for some reason
            const sortedLevelThree = Object.keys(obj[indexOne][indexTwo]).sort((a, b) => new Date(b) - new Date(a));
            for (const indexThree of sortedLevelThree) {
                // Level four (value)
                for (const value of Object.values(obj[indexOne][indexTwo][indexThree])) {
                    // We only need level two length and level three's values
                    reconstruct[levelTwoIteration].push(new String(value));
                }
            }
            levelTwoIteration++;
        }
    }

    // Determine the height of the matrix based on the maximum amount of items in the second level of new reconstructed array
    let height = 0;
    for (const item in reconstruct) {
        if (height < Object.values(reconstruct[item]).length) height = Object.values(reconstruct[item]).length;
    }

    // Create 1D Matrix only height
    let matrix = [];

    for (let i = 0; i < height; i++) {
        if (!matrix[i]) matrix[i] = [];
    }

    for (const posX in reconstruct) {
        for (const posY in reconstruct[posX]) {
            matrix[posY][posX] = reconstruct[posX][posY];
        }
    }

    return matrix;
}

重构

变量

{Subheader}: [
    1, 2, 3, 10, 6
{Subheader}: [
    2, 6, 1, 50, 10
{Subheader}: [
    4, 5, 5, 8, 4

然后我初始化了一维矩阵，它的长度是基于哪个子标题有最多的项，所以稍后我们可以很容易地把每个子标题放到它的位置

|1|
|2|
|3|
|4|
|5|

---

然后我循环到重构数组中，第一次循环迭代是Y轴上它应该在矩阵上的位置，矩阵是子标题，然后我循环到值中，得到值的迭代次数，最后我指定[x][Y]位置的值。在所有这些混乱之后，我将矩阵返回到

v-for

并循环到它们中进行显示。

我并不完全理解您的示例，但我假设是这样的：

 const data = {
  "header_1_1": {
    "subheader_1_1_1": {
      "2021-05-26 00:09": [1, 2, 3],
      "2021-05-26 00:13": [10],
      "2021-05-26 00:16": [6],
    },
    "subheader_1_1_2": {
      "2021-05-26 00:09": [2, 6, 1],
      "2021-05-26 00:13": [50],
      "2021-05-26 00:16": [10],
    },
  },
  "header_1_2": {
    "subheader_1_2_1": {
      "2021-05-26 00:09": [4],
      "2021-05-26 00:13": [5, 5, 8],
      "2021-05-26 00:16": [4],
    },
  }
}

争吵 我认为创建表中将包含的行更容易，因此让我们从以下内容开始：

//示例数据
常数数据={
“标题_1_1”：{
“分目1_1_1”：{
"2021-05-26 00:09": [1, 2, 3],
"2021-05-26 00:13": [10],
"2021-05-26 00:16": [6],
},
“分目1_1_2”：{
"2021-05-26 00:09": [2, 6, 1],
"2021-05-26 00:13": [50],
"2021-05-26 00:16": [10],
},
},
“标题_1_2”：{
“分目1_2_1”：{
"2021-05-26 00:09": [4],
"2021-05-26 00:13": [5, 5, 8],
"2021-05-26 00:16": [4],
},
},
}
//阅读树结构
常数readTree=（arr）=>{
让ret=[]
for（设i=0；i{
让ret=[]
for（设i=0；i<列[0]。长度；i++）{
如果（ret[i]==“未定义的类型”）ret[i]=[]
for（设j=0；j{
让html=''
data.forEach（行=>{
html+=''
row.forEach（单元格=>{
html+=`${cell}`
})
html+=''
})
返回html
}
tbody.innerHTML=createRowHtml（行）

您将看到

 const data = {
  "header_1_1": {
    "subheader_1_1_1": {
      "2021-05-26 00:09": [1, 2, 3],
      "2021-05-26 00:13": [10],
      "2021-05-26 00:16": [6],
    },
    "subheader_1_1_2": {
      "2021-05-26 00:09": [2, 6, 1],
      "2021-05-26 00:13": [50],
      "2021-05-26 00:16": [10],
    },
  },
  "header_1_2": {
    "subheader_1_2_1": {
      "2021-05-26 00:09": [4],
      "2021-05-26 00:13": [5, 5, 8],
      "2021-05-26 00:16": [4],
    },
  }
}