使用从网站端点获取的数据显示数据 / Javascript

Question

所以，我在节点服务器上有一个 http://localhost:3000/community 端点，在调用 GET 方法的情况下，它会向我显示 3 个不同的 objects，其中包含有关“用户”的信息。
例如：

[
  {
    "avatar": "http://localhost:3000/avatars/avatar1.png",
    "firstName": "Mary",
    "lastName": "Smith",
    "position": "Lead Designer at Company Name"
  },
  {
    "avatar": "http://localhost:3000/avatars/avatar2.png",
    "firstName": "Bill",
    "lastName": "Filler",
    "position": "Lead Engineer at Company Name"
  },
  {
    "avatar": "http://localhost:3000/avatars/avatar3.png",
    "firstName": "Tim",
    "lastName": "Gates",
    "position": "CEO at Company Name"
  }
]

任务不是获取控制台中显示的信息，而是通过以下方式在网站上创建的部分中显示：

Mary Smith、John Smyth 和 Maryanne Smytch 是 json 文件中的名字，他们的位置也在 json 文件中，头像也在。
我的问题是，因为我是 javascript 的新手并且正在使用 fetch，如何获取这些数据并将它们放入 DOM？该部分应在 javascript 中动态生成。我只需要一个代码片段，因为我搜索了整个互联网，但我没有找到如何从 json 单独获取数据并将它们像头像一样放置，或 header，或 textarea 或其他东西。
请帮助，提前致谢！
我的获取函数：

const sendHttpRequest = (method, url, data) => {
    return fetch(url, {
        method: method,
        body: JSON.stringify(data),
        headers: data ? {
            'Content-Type': 'application/json'
        } : {}
    }).then(response => {
        if (response.status >= 400) {
            return response.json().then(errResData => {
                const error = new Error('Something went wrong!');
                error.data = errResData;
                throw error;
            });
        }
        return response.json();
    });
};

const getCommunity = () => {
    sendHttpRequest('GET','http://localhost:8080/community')
    .then(communityResponse =>{
        console.log(communityResponse);
    }).catch(err =>{
        console.log(err,err.data);
    });
}

来自服务器的社区路由：

const express = require('express');
const router = express.Router();
const {randomNumber} = require('../utils');
const FileStorage = require('../services/FileStorage');


/* GET /community */
router.get('/', async function(req, res) {
  try {
    const result = await FileStorage.readJsonFile(`community/${randomNumber(1, 3)}.json`);
    await res.json(result);
  } catch (e) {
    console.log(e);
    res.status(500).send('Internal error');
  }
});

module.exports = router;

Answer 1

您可以在响应数组内部映射并将数据附加到正文中，如下所示：

for (let i=0;i<items.length;i++) {
 // appending your elements to the body :
 document.body.appendChild(items[i]);}

您可以像这样操作 DOM：

var node = document.createElement("LI");                 // Create a <li> node
var textnode = document.createTextNode("Water");         // Create a text node
node.appendChild(textnode);                              // Append the text to <li>
document.getElementById("myList").appendChild(node);

使用从网站端点获取的数据显示数据 / Javascript

Display data using fetch from an endpoint on website / Javascript

html

javascript

dom

fetch