求助：如何用JavaScript将消息JSON数组转换为HTML元素？

方法一：字符串拼接（简洁直观，适合入门） #

这种方法通过遍历JSON数组，直接拼接出目标HTML字符串，最后插入到页面容器中：

// 假设你已获取到目标JSON数据（如果是接口返回的字符串，先通过JSON.parse()解析）
const jsonData = {
    "data": [
        {
            "fieldData": {
                "Message": "Message 1",
                "Timestamp": "04/14/2023 11:39:13"
            }
        },
        {
            "fieldData": {
                "Message": "Message 2",
                "Timestamp": "04/13/2023 10:02:18"
            }
        },
        {
            "fieldData": {
                "Message": "Message 3",
                "Timestamp": "08/19/2021 19:51:21"
            }
        }
    ]
};

// 定义转换函数
function convertMessagesToHtml(messageList) {
    let htmlStr = '';
    // 遍历每个消息项
    messageList.forEach(item => {
        // 解构提取消息和时间戳
        const { Message, Timestamp } = item.fieldData;
        // 拼接对应的HTML标签
        htmlStr += `<p class="from-them">${Message}</p>`;
        htmlStr += `<time class="timestamp-to">${Timestamp}</time>`;
    });
    return htmlStr;
}

// 生成HTML并插入页面（假设页面有id为message-container的容器）
const targetHtml = convertMessagesToHtml(jsonData.data);
document.getElementById('message-container').innerHTML = targetHtml;

方法二：创建真实DOM元素（更安全，语义化） #

如果消息内容可能包含用户输入（存在XSS风险），推荐用这种方法直接创建DOM元素，避免HTML注入问题，同时还能添加语义化属性：

// 定义创建元素的函数
function createMessageElements(messageList) {
    const container = document.createElement('div');
    messageList.forEach(item => {
        const { Message, Timestamp } = item.fieldData;
        
        // 创建消息p标签
        const messageEl = document.createElement('p');
        messageEl.className = 'from-them';
        messageEl.textContent = Message;
        
        // 创建时间戳time标签（添加datetime属性符合HTML规范）
        const timeEl = document.createElement('time');
        timeEl.className = 'timestamp-to';
        timeEl.textContent = Timestamp;
        timeEl.setAttribute('datetime', new Date(Timestamp).toISOString());
        
        // 将元素添加到容器
        container.appendChild(messageEl);
        container.appendChild(timeEl);
    });
    return container;
}

// 生成元素并插入页面
const container = document.getElementById('message-container');
container.appendChild(createMessageElements(jsonData.data));

核心步骤说明 #

1. 解析JSON：若数据是字符串格式，先用JSON.parse()转换为JavaScript对象；
2. 遍历数组：通过forEach遍历data数组中的每个消息项；
3. 提取数据：用解构语法快速获取fieldData里的Message和Timestamp；
4. 生成内容：根据需求选择字符串拼接或DOM元素创建的方式；
5. 插入页面：将生成的内容添加到页面指定容器中。

内容的提问来源于stack exchange，提问作者user982124