When implementing the table function, you need to convert the back-end data to the format required by the front-end before you can render normally

At that time, I directly returned the data from the back end and processed it at the front end. Of course, you can also process the data at the back end and return it to the front end for direct use

 

The original data queried from the data is like this

(('Telephone number', '13140845519', '2022-01-10'), ('Telephone number', '18136773435', '2022-01-10'), ('Telephone number', '14592741294', '2022-01-10'), ('Telephone number', '18926391929', '2022-01-10'))

Large tuples contain small tuples

If the large tuple data is directly returned to the front end, it will become a list, as shown below

[["Telephone number", "13140845519", "2022-01-10"], ["Telephone number", "18136773435", "2022-01-10"], ["Telephone number", "14592741294", "2022-01-10"], ["Telephone number", "18926391929", "2022-01-10"], ["Telephone number", "13214621532", "2022-01-10"]]

Finally, it needs to be processed into this format

[{
    "date": "2022-01-10",
    "type": "Telephone number",
    "value": "13140845519"
}, {
    "date": "2022-01-10",
    "type": "Telephone number",
    "value": "18136773435"
}, {
    "date": "2022-01-10",
    "type": "Telephone number",
    "value": "14592741294"
}, {
    "date": "2022-01-10",
    "type": "Telephone number",
    "value": "18926391929"
}, {
    "date": "2022-01-10",
    "type": "Telephone number",
    "value": "13214621532"
}]

1. Front end processing

First, the original data received by the front end is not a tuple, but a list, as shown below

[["Telephone number", "13140845519", "2022-01-10"], ["Telephone number", "18136773435", "2022-01-10"], ["Telephone number", "14592741294", "2022-01-10"], ["Telephone number", "18926391929", "2022-01-10"], ["Telephone number", "13214621532", "2022-01-10"]]

To convert it to the desired format, you can try using js's map method array prototype. map()

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

This idea is obvious, because the function of map is: the map() method creates a new array, and the result is that each element in the array is the return value after calling the provided function once

So just define a function to repackage the data in each small list in the form of {key: value}

The code is as follows

...... ...... ......
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 represents the original data returned by the back-end interface, and the map method is used for it;

An object rObj is defined in the function in the map method. By default, it is an empty object, and then three key s are stuffed into the object, which are date, type and value respectively. Their values are the corresponding values in the small list;

Finally, the required data form is obtained

2. Processing on the back end

First convert tuples to lists

old_data = (('Telephone number', '13140845519', '2022-01-10'), ('Telephone number', '18136773435', '2022-01-10'), ('Telephone number', '14592741294', '2022-01-10'), ('Telephone number', '18926391929', '2022-01-10'))

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

give the result as follows

[['Telephone number', '13140845519', '2022-01-10'], ['Telephone number', '18136773435', '2022-01-10'], ['Telephone number', '14592741294', '2022-01-10'], ['Telephone number', '18926391929', '2022-01-10']]

Define a function to turn the list into a dictionary

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

This function can

['Telephone number', '13140845519', '2022-01-10']

Convert to

{'date': '2022-01-10', 'type': 'Telephone number', 'value': '13140845519'}

Finally, use the map method to convert each list in the list to dict

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

give the result as follows

[{'date': '2022-01-10', 'type': 'Telephone number', 'value': '13140845519'}, {'date': '2022-01-10', 'type': 'Telephone number', 'value': '18136773435'}, {'date': '2022-01-10', 'type': 'Telephone number', 'value': '14592741294'}, {'date': '2022-01-10', 'type': 'Telephone number', 'value': '18926391929'}]