flask+vue学习：关于如何处理列表所需的数据

在实现table表格功能时，需要把后端的数据转为为前端需要的格式，才可以正常渲染

我当时是直接把后端的数据返回出去，然后在前端处理的。当然也可以在后端把数据处理好后，返回给前端直接用

 

从数据查询后的原始数据这样的

(('电话号码', '13140845519', '2022-01-10'), ('电话号码', '18136773435', '2022-01-10'), ('电话号码', '14592741294', '2022-01-10'), ('电话号码', '18926391929', '2022-01-10'))

大元组包含着小元组

如果直接把大元组数据返回给前端，会变成一个列表，如下

[["电话号码", "13140845519", "2022-01-10"], ["电话号码", "18136773435", "2022-01-10"], ["电话号码", "14592741294", "2022-01-10"], ["电话号码", "18926391929", "2022-01-10"], ["电话号码", "13214621532", "2022-01-10"]]

最终需要处理为这种格式

[{
    "date": "2022-01-10",
    "type": "电话号码",
    "value": "13140845519"
}, {
    "date": "2022-01-10",
    "type": "电话号码",
    "value": "18136773435"
}, {
    "date": "2022-01-10",
    "type": "电话号码",
    "value": "14592741294"
}, {
    "date": "2022-01-10",
    "type": "电话号码",
    "value": "18926391929"
}, {
    "date": "2022-01-10",
    "type": "电话号码",
    "value": "13214621532"
}]

1、在前端处理

首先，前端接收到的原始数据不是元组，而是列表，如下

[["电话号码", "13140845519", "2022-01-10"], ["电话号码", "18136773435", "2022-01-10"], ["电话号码", "14592741294", "2022-01-10"], ["电话号码", "18926391929", "2022-01-10"], ["电话号码", "13214621532", "2022-01-10"]]

要把它转换为所需格式的话，可以尝试使用js的map方法  Array.prototype.map()

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map

这样思路就很明显了，因为map的作用是：map() 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值

所以只需定义一个函数，它来把每个小list中的数据重新包装一下，包装为{key: value}的形式即可

代码如下

...... ...... ......
let data_list = res.data.records.map(function(array) {
          let rObj = {};
          rObj["date"] = array[2]
          rObj["type"] = array[0]
          rObj["value"] = array[1]
          return rObj;})
...... ...... ......

res.data.records 表示后端接口返回的原始数据，对它使用map方法；

在map方法内的函数中定义了一个对象rObj，它默认是个空对象，然后对象中塞入3个key，分别为date、type、value，它们的值分别取小list中对应的值；

最终就得到了所需的数据形式

2、在后端处理

先把元组转换为列表

old_data = (('电话号码', '13140845519', '2022-01-10'), ('电话号码', '18136773435', '2022-01-10'), ('电话号码', '14592741294', '2022-01-10'), ('电话号码', '18926391929', '2022-01-10'))

new_data = [list(item) for item in list(old_data)]
print(new_data)

结果如下

[['电话号码', '13140845519', '2022-01-10'], ['电话号码', '18136773435', '2022-01-10'], ['电话号码', '14592741294', '2022-01-10'], ['电话号码', '18926391929', '2022-01-10']]

定义一个函数，把列表转为字典

def list_obj(array):
    obj = {"date": array[2], "type": array[0], "value": array[1]}
    return obj

该函数可以把

['电话号码', '13140845519', '2022-01-10']

转换为

{'date': '2022-01-10', 'type': '电话号码', 'value': '13140845519'}

最后使用map方法把列表中的每个list转为dict

m = map(list_obj, new_data)
print(list(m))

结果如下

[{'date': '2022-01-10', 'type': '电话号码', 'value': '13140845519'}, {'date': '2022-01-10', 'type': '电话号码', 'value': '18136773435'}, {'date': '2022-01-10', 'type': '电话号码', 'value': '14592741294'}, {'date': '2022-01-10', 'type': '电话号码', 'value': '18926391929'}]