从API中获取数据不起作用

Question

我在主机8888上运行了一个本地API，我有一个用户主机。

我在 index.html

中有以下内容

<ul class = "list-grouop" id="chats"></ul>

并且在同一个文件中（ index.html ）：

<script>

        const url = 'http://localhost:8888/chats';
        const ul = document.getElementById('chats');


        // Create the type of element you pass in the parameters
        function createNode(element) 
        {
            return document.createElement(element); 
        }

        // Append the second parameter(element) to the first one
        function append(parent, el) 
        {
            return parent.appendChild(el); 
        }

        fetch(url)
        .then((resp) => resp.json()) 
        .then(function(data) 
        {
              // Create and append the li's to the ul
              let chats = data;
              return chats.map(function(chat) 
              { // Map through the results and for each run the code below
                  let li = createNode('li'), //  Create the elements we need
                  span = createNode('span');
                  span.innerHTML = `${chats[0]}`; // Make the HTML of our span to be the first person in the chat
                  append(li, span);
                  append(ul, li);
              });
        });

    </script>

我在 chats.json （本地API）中有以下内容：

[
  {
    "id": 1,
    "users": ["x", "y"]
  },
  {
    "id": 2,    
    "users": ["x", "z"]
  }
]

但问题是我得到了这个：

  

TypeError：chats.map不是函数

当我尝试运行时：

fetch(url)
  .then(response => response.json())
  .then(json => { console.log(json) });

我得到了这个：`

  

对象{聊天：数组[0]}

这就是我在网络中所拥有的：

感谢您的时间