无法使用 ES6 访问我的 JSON 文件

Question

我正在开发一个小型聊天应用程序，您可以在其中单击不同的联系人并查看/发送消息。

我有这个包含联系人的 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 文件。

Answer 1

这是函数，已修复：

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>。