Question

如何从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."
            }
        }
    ]
}   
}

Answer 1

您可以通过逐步进行聊天，然后像这样通过各个聊天贡献进行步行，从头开始在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>

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

1 个答案: