Flask与JavaScript数据交互：如何正确解析Flask返回的字典数组并提取信息

嘿，我懂你的困扰！其实你已经拿到了正确的对象结构，只是没找对访问和展示它们的方式而已。

为什么会显示[object Object]？ #

当你直接把JS对象数组传给.text()方法时，JavaScript会默认调用每个对象的toString()方法，而这个方法的默认返回值就是[object Object]——但实际上data.messages已经是和你Python里的字典数组完全对应的JS对象数组了，每个元素都是可以直接访问属性的对象，和Python字典的结构一一对应。

解决方案1：先查看完整数据结构（调试用） #

如果你想先确认数据和Python里的结构一致，可以用JSON.stringify()把对象数组转成可读性强的JSON字符串：

setInterval(function () {
    $SCRIPT_ROOT = {{ request.script_root|tojson|safe }}
    $.getJSON($SCRIPT_ROOT+"/consensus", function(data) {
        // 把对象数组转成格式化的JSON字符串，方便查看结构
        $("#messages").text(JSON.stringify(data.messages, null, 2));
    });
} , 10000)

这样你就能看到和Python里几乎一样的结构，确认每个字段的名称和值是否正确。

解决方案2：提取并展示具体字段（实际业务用） #

如果要把每个消息的具体内容友好展示出来，你需要遍历这个对象数组，逐个提取你需要的字段（比如sender、recipient、amount、message），再拼接成可读的内容：

setInterval(function () {
    $SCRIPT_ROOT = {{ request.script_root|tojson|safe }}
    $.getJSON($SCRIPT_ROOT+"/consensus", function(data) {
        const messagesContainer = $("#messages");
        // 先清空容器，避免重复叠加旧内容
        messagesContainer.empty();
        
        // 遍历每个消息对象
        $.each(data.messages, function(_, message) {
            // 把 recipient 数组转成逗号分隔的字符串
            const recipients = message.recipient.join(', ');
            // 拼接当前消息的文本内容
            const messageContent = `
                发送方: ${message.sender}
                接收方: ${recipients}
                数量: ${message.amount}
                消息: ${message.message}
            `;
            // 用<p>标签包裹内容，添加到容器中（也可以换成<li>等其他标签）
            messagesContainer.append(`<p>${messageContent}</p>`);
        });
    });
} , 10000)

这里的message就是对应Python里的每个字典，你可以直接用.来访问属性（比如message.sender等价于Python里的dict['sender']）。

关键知识点 #

• Flask的jsonify()会自动把Python的字典数组转换成JavaScript能识别的对象数组，所以data.messages就是你要的目标结构，不需要额外转换。
• 永远不要直接把对象数组塞给.text()或.html()，必须先提取对象的内容，转成字符串或HTML片段再展示。

内容的提问来源于stack exchange，提问作者Meat Eflymas