📌  相关文章
📜  { "data": [ { "title": "", "img": "", "address": "" }, ] } json 到 html - Javascript (1)

📅  最后修改于: 2023-12-03 14:48:43.619000             🧑  作者: Mango

/**
 * 将 JSON 数据转换成 HTML 表格
 * @param {string} json - JSON 字符串
 * @returns {string} - 转换后的 HTML 表格
 */
function jsonToHtmlTable(json) {
    try {
        const data = JSON.parse(json);

        if (!data.hasOwnProperty('data') || !Array.isArray(data.data)) {
            return 'Invalid JSON format.';
        }

        if (data.data.length === 0) {
            return 'No data found.';
        }

        let html = '<table>\n';
        html += '<thead>\n<tr>';

        // 表头
        for (const key in data.data[0]) {
            html += `<th>${key}</th>`;
        }

        html += '</tr>\n</thead>\n<tbody>\n';

        // 数据行
        for (const item of data.data) {
            html += '<tr>';

            for (const key in item) {
                html += `<td>${item[key]}</td>`;
            }

            html += '</tr>\n';
        }

        html += '</tbody>\n</table>';

        return html;
    } catch (error) {
        return 'Invalid JSON format.';
    }
}

// JSON 数据
const json = '{ "data": [ { "title": "", "img": "", "address": "" } ] }';

// 转换为 HTML 表格
const htmlTable = jsonToHtmlTable(json);

console.log(htmlTable);

使用以上代码,可以将给定的 JSON 数据转换成 HTML 表格。请将 json 变量中的 JSON 字符串替换为你的实际数据,然后使用 jsonToHtmlTable 函数进行转换。转换后的 HTML 表格将会被打印到控制台。

注意:以上代码假设 JSON 数据是一个对象,其中包含一个名为 data 的数组,数组中的每个对象表示一个数据项,对象的属性为表格的列名,对应的属性值为表格中的单元格内容。如果 JSON 数据格式不符合要求,将返回相应的错误信息。