Question

我有这个东西

{"key":["0114","1","2013"],"values":["279"]},
{"key":["0114","1","2014"],"values":["235"]},
{"key":["0114","1","2015"],"values":["258"]},
{"key":["0114","1","2016"],"values":["274"]},
{"key":["0114","1","2017"],"values":["293"]}

0114是瑞典的一个县。

1代表男人

2013 ...是岁月

值是指前出生的男人的数量。 2013

我想这样显示它们：

现在的外观：

我现在如何显示：

    <div class="tabellWrapper">
            <table class="kommunerMainWrapper" >
                <thead>
                    <tr>
                        <td >Kommun</td>
                        <th >Kön</th>
                        <th >2013</th>
                        <th >2014</th>
                        <th >2015</th>
                        <th >2016</th>
                        <th >2017</th>
                    </tr>
                </thead>
                <tbody class="kommunerWrapper" >
                    <template v-for="(data,index) in selectedLanData">
                        <tr v-if="data.key[1] ==='1'" :key="index">
                            <th class="kommunerItem kommun">{{data.key[0]}}</th>
                            <th class="kommunerItem sex" >Män</th>
                            <th class="kommunerItem numbers">{{data.values[0]}}</th>
                            <th class="kommunerItem numbers">{{data.key[2]}}</th>
                        </tr>
                        <tr v-else :key="index">
                            <th class="kommunerItem kommun">{{data.key[0]}}</th>
                            <th class="kommunerItem sex" >Kvinnor</th>
                            <th class="kommunerItem numbers">{{data.values[0]}}</th>
                            <th class="kommunerItem numbers">{{data.key[2]}}</th>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
    </div>

Answer 1

我认为您应该先解析数据数组。如果您有可能，则可能是以下代码：

var source = [
    {"key":["0114","1","2013"],"values":["279"]},
    {"key":["0114","1","2014"],"values":["235"]},
    {"key":["0114","1","2015"],"values":["258"]},
    {"key":["0114","1","2016"],"values":["274"]},
    {"key":["0114","1","2017"],"values":["293"]}
];

var parsed = {};

for (var i=0; i<source.length; i++) {
    var key = source[i].key;
    if (!(source[i].key[0] in parsed)) {
        parsed[source[i].key[0]] = {};
    }
    if (!(source[i].key[1] in parsed[source[i].key[0]])) {
        parsed[source[i].key[0]][source[i].key[1]] = {};
    }
    if (!(source[i].key[2] in parsed[source[i].key[0]][source[i].key[1]])) {
        parsed[source[i].key[0]][source[i].key[1]][source[i].key[2]] = 0;
    }
    parsed[source[i].key[0]][source[i].key[1]][source[i].key[2]] += parseInt(source[i].values);
}

console.log(parsed);

Answer 2

您可以简单地使用reduce函数来做到这一点：

\r

在一行中显示具有相同键的对象

2 个答案: