时间戳

首页 > 解决方案 > 如何安排从 JSON 文件接收和发送的聊天对话数据？

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");
    }
}

这是 JSON 文件数据：

{
"data":{
    "chat1" : [  
        {  
           "from":{  
              "type":"user1"
           },
           "msg":{  
              "message": "Hello"
              }
        },
        {  
           "from":{  
               "type":"user2"
           },
           "msg":{  
              "message":"Hi"

           }
        },
        {  
           "from":{  
              "type":"user1"
           },
           "msg":{  
              "message": "What plans for today?"
              }
        },
        {  
           "from":{  
               "type":"user2"
           },
           "msg":{  
              "message":"Nothing much. How about you?"

           }
        },
        {  
           "from":{  
              "type":"user1"
           },
           "msg":{  
              "message": "Planning to go to a movie. Wanna come?"
              }
        },
        {  
           "from":{  
               "type":"user2"
           },
           "msg":{  
              "message":"Sure why not."

           }
        },
        {  
           "from":{  
              "type":"user1"
           },
           "msg":{  
              "message": "Great. see you then."
              }
        },
        {  
           "from":{  
               "type":"user2"
           },
           "msg":{  
              "message":"ya bye."

           }
        }
   ],

   "chat2" : [  
        {  
            "from":{  
                "type":"user1"
            },
            "msg":{  
                "message": "Hi"
            }
        },
        {  
            "from":{  
                "type":"user2"
            },
            "msg":{  
                "message":"Hi"
            }
        },
        {  
            "from":{  
                "type":"user1"
            },
            "msg":{  
                "message": "How can I help you?"
            }
        },
        {  
            "from":{  
                "type":"user2"
            },
            "msg":{  
                "message":"I would like to know more about your product."
            }
        },
        {  
            "from":{  
                "type":"user1"
            },
            "msg":{  
                "message": "Sure. I will send you an email with details on our product."
            }
        },
        {  
            "from":{  
                "type":"user1"
            },
            "msg":{  
                "message":"Let me know if you have any doubts."
            }
        },
        {  
            "from":{  
                "type":"user2"
            },
            "msg":{  
                "message": "Great. Thanks!"
            }
        },
        {  
            "from":{  
                "type":"user1"
            },
            "msg":{  
                "message":"Anytime."
            }
        }
    ]
}   
}

标签： jqueryhtmljsonchat

解决方案

您可以通过逐步完成聊天并遍历单个聊天贡献，从头开始在 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)
 }

然后将其分配给 DOM 元素innerHTML属性（聊天由水平线分隔<hr>）：

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

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

var dat={
"data":{
    "chat1" : [  
        {  
           "from":{  
              "type":"user1"
           },
           "msg":{  
              "message": "Hello"
              }
        },
        {  
           "from":{  
               "type":"user2"
           },
           "msg":{  
              "message":"Hi"

           }
        },
        {  
           "from":{  
              "type":"user1"
           },
           "msg":{  
              "message": "What plans for today?"
              }
        },
        {  
           "from":{  
               "type":"user2"
           },
           "msg":{  
              "message":"Nothing much. How about you?"

           }
        },
        {  
           "from":{  
              "type":"user1"
           },
           "msg":{  
              "message": "Planning to go to a movie. Wanna come?"
              }
        },
        {  
           "from":{  
               "type":"user2"
           },
           "msg":{  
              "message":"Sure why not."

           }
        },
        {  
           "from":{  
              "type":"user1"
           },
           "msg":{  
              "message": "Great. see you then."
              }
        },
        {  
           "from":{  
               "type":"user2"
           },
           "msg":{  
              "message":"ya bye."

           }
        }
   ],

   "chat2" : [  
        {  
            "from":{  
                "type":"user1"
            },
            "msg":{  
                "message": "Hi"
            }
        },
        {  
            "from":{  
                "type":"user2"
            },
            "msg":{  
                "message":"Hi"
            }
        },
        {  
            "from":{  
                "type":"user1"
            },
            "msg":{  
                "message": "How can I help you?"
            }
        },
        {  
            "from":{  
                "type":"user2"
            },
            "msg":{  
                "message":"I would like to know more about your product."
            }
        },
        {  
            "from":{  
                "type":"user1"
            },
            "msg":{  
                "message": "Sure. I will send you an email with details on our product."
            }
        },
        {  
            "from":{  
                "type":"user1"
            },
            "msg":{  
                "message":"Let me know if you have any doubts."
            }
        },
        {  
            "from":{  
                "type":"user2"
            },
            "msg":{  
                "message": "Great. Thanks!"
            }
        },
        {  
            "from":{  
                "type":"user1"
            },
            "msg":{  
                "message":"Anytime."
            }
        }
    ]
}   
};
 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>');
div {font-family: arial}
.user1 {padding:10px;background-color:#ddd;margin-right:55%; border-radius:10px}
.user2 {padding:10px;color:white;background-color:#69f;margin-left:55%; border-radius:10px}
<div id="chat"></div>

推荐阅读