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

【问题标题】：Display data using fetch from an endpoint on website / Javascript使用从网站/Javascript 的端点获取数据来显示数据
【发布时间】：2022-01-21 16:04:36
【问题描述】：

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

[
  {
    "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 获取数据并将它们像头像、标题、文本区域或其他东西一样放置。
请帮忙，在此先感谢！
我的获取函数：

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;

【问题讨论】：

标签： javascript html dom fetch

【解决方案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);

【讨论】：