我正在开发一个小聊天应用程序,您可以在其中点击不同的联系人并查看/发送消息。
我有这个带有联系人的users.json文件:
{
"results":[
{
"gender":"female",
"name":{
"title":"Ms",
"first":"Leonie",
"last":"Otto"
},
"location":{
"street":"3076 raiffeisenstraße",
"city":"meißen",
"state":"sachsen-anhalt",
"postcode":62480
},
"email":"leonie.otto@example.com",
"login":{
"username":"bigwolf465",
"password":"stephane",
"salt":"Ip5qcgs5",
"md5":"fe5df54750c64b7c5d54c92f0cb91f11",
"sha1":"17d255fb64135b5e247a4ef5554557a1d2a8881e",
"sha256":"341d750fce611b853b4f27d485f10ef9f9c3add4de12a7fbf838a1fd2d5168a9"
},
"dob":"1955-01-08 01:03:55",
"registered":"2012-07-07 16:42:10",
"phone":"0265-7006038",
"cell":"0178-0561111",
"id":{
"name":"",
"value":null
},
"picture":{
"large":"https://randomuser.me/api/portraits/women/8.jpg",
"medium":"https://randomuser.me/api/portraits/med/women/8.jpg",
"thumbnail":"https://randomuser.me/api/portraits/thumb/women/8.jpg"
},
"nat":"DE",
"status": "online"
},
{
"gender":"female",
"name":{
"title":"Miss",
"first":"Olive",
"last":"Wright"
},
"location":{
"street":"2912 manukau road",
"city":"timaru",
"state":"otago",
"postcode":30721
},
"email":"olive.wright@example.com",
"login":{
"username":"brownrabbit413",
"password":"derek",
"salt":"gRxy7hHq",
"md5":"dc214ffe467373790c8500abd1ff0f8f",
"sha1":"7b7847e1a9e3b3de081e3eeebf972dc5d2b5527a",
"sha256":"1763dff5c43e1cea431d1ad8c1648c586af9d1e1410001d743078af143ce30b9"
},
"dob":"1982-07-01 12:12:29",
"registered":"2016-03-25 19:15:33",
"phone":"(003)-127-5232",
"cell":"(133)-307-2001",
"id":{
"name":"",
"value":null
},
"picture":{
"large":"assets/img/users/233899238.jpg"
},
"nat":"NZ",
"status": "online"
}
我把它们放在列表项中,我会显示它们的名称,用户名和个人资料图片。这一切都运作良好。
下一个我想要的是,如果我点击特定联系人,它会显示他们所有的消息历史记录。
因此,作为与用户名bigwolf465联系的示例,我使用此json文件:
{
"ok": true,
"messages": [
{
"type": "message",
"user": "me",
"text": "Can I have this?",
"ts": "1512085950.000216"
},
{
"type": "message",
"user": "other",
"text": "No.",
"ts": "1512085950.218404"
},
{
"type": "message",
"user": "me",
"text": "Ah, perhaps I’ve miscommunicated. I’m asking for it because I want it.",
"ts": "1512085950.000216"
},
{
"type": "message",
"user": "other",
"text": "I understood that, actually.",
"ts": "1512085950.000216"
},
{
"type": "message",
"user": "me",
"text": "I think maybe you’re not hearing me. I’d like it because I want it.",
"ts": "1512085950.000216"
},
{
"type": "message",
"user": "other",
"text": "There's no problem with my hearing. The problem is that your argument is, as the Romans would say:",
"ts": "1512085950.000216"
},
{
"type": "message",
"user": "other",
"text": "Circulus in probando.",
"ts": "1512085950.000216"
}
],
"pin_count": 0
}
我还想为这些消息创建一个列表项,但它似乎没有成功。这是我现在的JS代码:
const handleContactClick = ({
currentTarget: $li
}) => {
loadContactDetails($li);
};
const loadContactDetails = $li => {
fetch(`./assets/data/messages/${$li.dataset.username}.json`)
.then(r => r.json())
.then(parseContactDetail);
}
const parseContactDetail = messages => {
const $container = document.querySelector(`.messages-list`);
const $li = document.createElement(`li`);
$li.classList.add(`reply`);
$container.appendChild($li);
const $img = document.createElement(`img`);
$img.setAttribute(`src`, `assets/img/me.png`);
$li.appendChild($img);
const $p = document.createElement(`p`);
$p.textContent = `${messages.text}`;
$li.appendChild($p);
}
当我点击特定联系人时,它只会添加文本“未定义”的消息。我真的不知道如何解决它,似乎我无法访问JSON文件。
答案 0 :(得分:2)
这是函数,已修复:
const parseContactDetail = person => {
const $container = document.querySelector(`.messages-list`);
person.messages.forEach(m => {
const $li = document.createElement(`li`);
$li.classList.add(`reply`);
$container.appendChild($li);
const $img = document.createElement(`img`);
$img.setAttribute(`src`, `assets/img/me.png`);
$li.appendChild($img);
const $p = document.createElement(`p`);
$p.textContent = `${m.text}`;
$li.appendChild($p);
});
}
该函数现在可以从传递的数据对象中正确地抓取.messages
,然后在数组上循环,为每个元素创建<li>
。