获取JSON到HTML JavaScript表

Question

我创建了一个新类别作为主表列表。问题是如何将此JSON数据以以下格式插入JavaScript HTML表中：

{  
 "m_iPatientID":2,
 "tpoCampos":[  
  {  
     "m_cColor":"#000000",
     "m_cType":"combo",
     "m_cOptions":[  
        "Sim",
        "N\u00e3o"
     ],
     "m_cQuestion":"",
     "m_cAnswer":"2",
     "m_eIdComposant":4443
  },
  {  
     "m_cColor":"#000000",
     "m_cType":"combo",
     "m_cOptions":[  
        "Sim",
        "N\u00e3o"
     ],
     "m_cQuestion":"",
     "m_cAnswer":"2",
     "m_eIdComposant":4448
  }
 ]
}

这样的表：

{
  query: {
    count: 10,
    created: "2015-12-09T17:12:09Z",
    lang: "en-US",
    diagnostics: {},
    ...
  },
  test1: {
    count: 16,
    created: "2015-12-09T17:12:09Z",
    lang: "en-US",
    diagnostics: {},
    ...
  },
  bold: {
    count: 1,
    created: "2015-12-09T17:12:09Z",
    lang: "en-US",
    diagnostics: {},
    ...
  },
  home: {
    count: 1,
    created: "2015-12-09T17:12:09Z",
    lang: "en-US",
    diagnostics: {},
    ...
  },
  .....
}

Answer 1

这是一个简短的示例，可以帮助您理解原理，然后对其进行调整以适合您的需求。

const source = {
  query: {
    count: 10,
    created: "2015-12-09T17:12:09Z",
    lang: "en-US"
  },
  test1: {
    count: 16,
    created: "2015-12-09T17:12:09Z",
    lang: "en-US"
  },
  bold: {
    count: 1,
    created: "2015-12-09T17:12:09Z",
    lang: "en-US"
  },
  home: {
    count: 1,
    created: "2015-12-09T17:12:09Z",
    lang: "en-US"
  }
}

const keys = Object.keys(source); // get the names properly
const colNames = Object.keys(source[keys[0]]); // get all column names

// Let's form table and header first
const table = document.createElement('table');
const header = document.createElement('tr');
header.innerHTML = `<th>name</th>`
header.innerHTML += colNames.map(name => `<th>${name}</th>`).join('');
table.appendChild(header);

// Now lets append all the rows
const rows = keys.map((key) => {
  const tr = document.createElement('tr');
  tr.innerHTML = `<td>${key}</td>`
  tr.innerHTML += colNames.map(name => `<td>${source[key][name]}</td>`).join('');
  return tr;
});

rows.forEach(r => table.appendChild(r));

// render
document.body.appendChild(table);

td, th {
  width: 120px;
  border: 1px solid black;
}

Answer 2

与此类似吗？

这将基于JSON数据生成html标记。然后将其写入文档。

var data = {
  query: {
    count: 10,
    created: "2015-12-09T17:12:09Z",
    lang: "en-US"
  },
  test1: {
    count: 16,
    created: "2015-12-09T17:12:09Z",
    lang: "en-US",
  },
  bold: {
    count: 1,
    created: "2015-12-09T17:12:09Z",
    lang: "en-US",
  },
  home: {
    count: 1,
    created: "2015-12-09T17:12:09Z",
    lang: "en-US",
  }
};

let htmlStr = "<table><tr><td>Name</td><td>Count</td><td>Time</td><td>Language</td></tr>";
const keys = Object.keys(data);
for (var key of keys) {
  let item = data[key];
  htmlStr += `<tr><td>${key}</td><td>${item.count}</td><td>${item.created}</td><td>${item.lang}</td></tr>`;
}
htmlStr += "</table>";
document.write(htmlStr);

table {
 border-collapse: collapse;
}

td {
 border: 1px solid black;
}

Answer 3

首先，您需要在HTML中创建一个<table>，对其应用一些样式（请参见下面的示例，您可以运行它）

然后在您的数据集上运行循环并将行添加到表中。

  

使用字符串文字将变量中的数据替换为rowHTML，或者您可以使用任何模板库来创建用于更干净代码的html模板。

var myData = {
	query: {
		count: 10,
		created: "2015-12-09T17:12:09Z",
		lang: "en-US",
		diagnostics: {},
	},
	test1: {
		count: 16,
		created: "2015-12-09T17:12:09Z",
		lang: "en-US",
		diagnostics: {},
	},
	bold: {
		count: 1,
		created: "2015-12-09T17:12:09Z",
		lang: "en-US",
		diagnostics: {},
	},
	home: {
		count: 1,
		created: "2015-12-09T17:12:09Z",
		lang: "en-US",
		diagnostics: {},
	}
};

var myDataKeys = Object.keys(myData);

var myTable = document.getElementById("myTable");

for(var i=0; i<myDataKeys.length; i++) {
	const rowData = myData[myDataKeys[i]];
	const rowHTML = `<tr><td>${myDataKeys[i]}</td><td>${rowData.count}</td><td>${rowData.created}</td><td>${rowData.lang}</td>`;
	myTable.innerHTML += rowHTML;
}

table, th, td {
  border: 1px solid black;
}

<table id="myTable">
 <tr><td>Name</td><td>Count</td><td>Time</td><td>Language</td></tr>
</table>

Answer 4

@Zac。我测试但不工作。

$.ajax({
            url: 'https://www.zpool.ca/api/currencies',
            success: function(data) {
                let htmlStr = "<table><tr><td>Name</td><td>Count</td><td>Time</td><td>Language</td></tr>";
                const keys = Object.keys(data)
                for (var key of keys) {
                    let item = data[key];
                    htmlStr += `<tr><td>${key}</td><td>${item.algo}</td><td>${item.port}</td><td>${item.name}</td></tr>`;
                }
                htmlStr += "</table>";
                document.write(htmlStr);
            }
        });