Jquery 如何安排从JSON文件接收和发送聊天对话数据？

如何从JSON文件中获取聊天对话数据，并以适当的方式将这些数据安排给特定的用户。 就像在任何聊天应用程序或网站。。。我想按顺序安排发送和接收的对话

如需了解更多信息，我已创建了一个插图： 和 这就是我现在能够访问它的方式：

我使用Jquery访问JSON的HTML的一部分：

let chatRcd1 = obj.data['chat1'];
for(let i=0, len=chatRcd1.length; i<len; i++){
    if(chatRcd1[i].from.type == "user1")
    $("<p><span>" + chatRcd1[i].msg.message + "</span></p><br>").appendTo(".recieved1");
}

let chatSnt1 = obj.data['chat1'];
for(let i=0, len=chatSnt1.length; i<len; i++){
    if(chatSnt1[i].from.type == "user2")
    $("<p><span>" + chatSnt1[i].msg.message + "</span></p><br>").appendTo(".sent1");

    let chatRcd = obj.data['chat2'];
    for(let i=0, len=chatRcd.length; i<len; i++){
        if(chatRcd[i].from.type == "user1")
        $("<p><span>" + chatRcd[i].msg.message + "</span></p><br>").appendTo(".recieved2");
    }

    let chatSnt = obj.data['chat2'];
    for(let i=0, len=chatSnt.length; i<len; i++){
        if(chatSnt[i].from.type == "user2")
        $("<p><span>" + chatSnt[i].msg.message + "</span></p><br>").appendTo(".sent2");
    }
}

---

您可以在DOM元素中从头开始构建html，方法是单步浏览聊天记录，然后像这样浏览各个聊天记录

 var chats=[];
 for (var chat in dat.data){
  var str='';
  dat.data[chat].forEach(ch=>str+='<div class="'+ch.from.type+'">'+ch.msg.message+'</div>')
  chats.push(str)
 }

顺便说一句：我只是喜欢jQuery，而且几乎用它做所有事情。但事实证明，这个小任务也可以通过简单的“香草”JavaScript来完成

var-dat={
“数据”：{
“chat1”：[
{  
“从”：{
“类型”：“user1”
},
“msg”：{
“消息”：“你好”
}
},
{  
“从”：{
“类型”：“user2”
},
“msg”：{
“消息”：“你好”
}
},
{  
“从”：{
“类型”：“user1”
},
“msg”：{
“信息”：“今天有什么计划？”
}
},
{  
“从”：{
“类型”：“user2”
},
“msg”：{
“留言”：“没什么，你呢？”
}
},
{  
“从”：{
“类型”：“user1”
},
“msg”：{
“留言”：“计划去看电影，想来吗？”
}
},
{  
“从”：{
“类型”：“user2”
},
“msg”：{
“消息”：“当然可以。”
}
},
{  
“从”：{
“类型”：“user1”
},
“msg”：{
“留言”：“太好了，到时候见。”
}
},
{  
“从”：{
“类型”：“user2”
},
“msg”：{
“留言”：“再见。”
}
}
],
“第二章”：[
{  
“从”：{
“类型”：“user1”
},
“msg”：{
“消息”：“你好”
}
},
{  
“从”：{
“类型”：“user2”
},
“msg”：{
“消息”：“你好”
}
},
{  
“从”：{
“类型”：“user1”
},
“msg”：{
“留言”：“我能为您做些什么？”
}
},
{  
“从”：{
“类型”：“user2”
},
“msg”：{
“信息”：“我想更多地了解您的产品。”
}
},
{  
“从”：{
“类型”：“user1”
},
“msg”：{
“信息”：“当然可以。我会给您发送一封电子邮件，详细介绍我们的产品。”
}
},
{  
“从”：{
“类型”：“user1”
},
“msg”：{
“消息”：“如果您有任何疑问，请告诉我。”
}
},
{  
“从”：{
“类型”：“user2”
},
“msg”：{
“留言”：“太好了，谢谢！”
}
},
{  
“从”：{
“类型”：“user1”
},
“msg”：{
“消息”：“随时。”
}
}
]
}   
};
var-chats=[]；
用于（数据中的var聊天）{
var-str=''；
dat.data[chat].forEach（ch=>str+=''+ch.msg.message+''）
聊天推送（str）
}
document.getElementById（'chat'）.innerHTML=chats.join（“
”）
div{font-family:arial}
.user1{填充：10px；背景色：#ddd；右边距：55%；边框半径：10px}
.user2{填充：10px；颜色：白色；背景色：#69f；左边距：55%；边框半径：10px}
JSON“文件”在服务器上是静态的吗？或者您是从web服务获取JSON？你知道如何以及在何处部署web应用程序吗？我建议使用时间戳来保持秩序-然后发送整个文件，让客户了解如何显示内容。我对web开发不熟悉，只是尝试不同的项目来学习。。。这个JSON文件是静态的。。。这是我正在创建的一个演示项目。在这里，您复制了JSON中的JSON数据。。。但如果我想从外部文件执行该操作，该怎么办？哪条路更好？感谢您的回复。使用JavaScript，您不会直接处理外部文件。您很可能会从AJAX调用接收相关数据，AJAX调用可能会将实际的JSON字符串转换为JavaScript对象，就像我在示例中处理的那样。
 var chats=[];
 for (var chat in dat.data){
  var str='';
  dat.data[chat].forEach(ch=>str+='<div class="'+ch.from.type+'">'+ch.msg.message+'</div>')
  chats.push(str)
 }

 document.getElementById('chat').innerHTML=chats.join('<hr>');