[英]Write multiple values from json file into HTML table with Javascipt
Heyy!嘿嘿!
I have a small problem.我有一个小问题。 I've tried a lot but haven't found a solution yet.
我已经尝试了很多,但还没有找到解决方案。 ^^
^^
There is a json file with multiple values.有一个具有多个值的 json 文件。 I would like to write the values from the file into an HTML table with Javascript (not php!).
我想用 Javascript(不是 php!)将文件中的值写入 HTML 表中。
Here is an example:这是一个例子:
Json File: json文件:
{
"628e191673ae8f7750c62fce": {
"name": "John",
"surname": "Smith",
"age": "24"
},
"628e1fd0d27981c6250d886c": {
"name": "Fred",
"surname": "Bloggs",
"age": "32"
},
"628e20c805f38641bdc08d7d": {
"name": "Joe",
"surname": "Harris",
"age": "27"
}
}
The table should then look like this:该表应如下所示:
Name![]() |
Surname![]() |
Age![]() |
---|---|---|
John![]() |
Smith![]() |
24 ![]() |
Fred![]() |
Bloggs![]() |
32 ![]() |
Joe![]() |
Harris![]() |
27 ![]() |
What is the best way for me to do this with Javascript?我用 Javascript 做到这一点的最佳方法是什么? Thank you in advance.
先感谢您。 :)
:)
Well, your JSON is a bit special since your data-rows are not an array, they are properties... But you could do it like this...好吧,你的 JSON 有点特别,因为你的数据行不是一个数组,它们是属性......但你可以这样做......
const jsonData = {
"628e191673ae8f7750c62fce": {
"name": "John",
"surname": "Smith",
"age": "24"
},
"628e1fd0d27981c6250d886c": {
"name": "Fred",
"surname": "Bloggs",
"age": "32"
},
"628e20c805f38641bdc08d7d": {
"name": "Joe",
"surname": "Harris",
"age": "27"
}
};
var firstIteration = true;
// create table element
for(var key1 in jsonData) { /* key1 will be the hex name */
var row = jsonData[key1];
// create tr element
if (firstIteration) {
for(var key2 in row) { /* key2 will be the attributes of the current row */
// create th element with key2 as content
}
firstIteration = false;
}
for(var key2 in row) {
// create td element with row[key2] as content
}
// close tr element
}
// close table element
You can break down the code into little bite-sized functions that build up the table row-by-row creating HTML strings along the way, and then adding them to the DOM.您可以将代码分解为小函数,这些函数逐行构建表格,并在此过程中创建HTML 字符串,然后将它们添加到 DOM。
const data = {"628e191673ae8f7750c62fce":{name:"John",surname:"Smith",age:"24"},"628e1fd0d27981c6250d886c":{name:"Fred",surname:"Bloggs",age:"32"},"628e20c805f38641bdc08d7d":{name:"Joe",surname:"Harris",age:"27"}}; // Returns a simple cell function getCell(data) { return `<td>${data}</td>`; } // Returns an string of cells HTML // `map` returns an array so we need to `join` // the elements together function getRow(data) { return data.map(getCell).join(''); } // Returns a set of rows by `mapping` // over the values of each object, and creating // a new row for each object function getRows(data) { return data.map(obj => { const values = Object.values(obj); return `<tr>${getRow(values)}</tr>`; }).join(''); } // Get the object values from the data const objs = Object.values(data); // Get the keys from the first object of `objs`. // This way we don't have to hard-code the headings // in the HTML markup const headers = Object.keys(objs[0]); // Construct a table using the functions const table = ` <table> <tbody> <tr class="headings">${getRow(headers)}</tr> ${getRows(objs)} </tbody> </table> ` // Add everything to a container document.body.insertAdjacentHTML('beforeend', table);
table { border-collapse: collapse; border: 1px solid #454545; width: 300px;} .headings { background-color: #efefef; font-weight: 600; text-transform: capitalize; } td { padding: 0.3em; border: 1px solid #efefef;}
Additional documentation附加文件
Simple way for doing it:简单的方法:
const jsonfile = { "628e191673ae8f7750c62fce": { "name": "John", "surname": "Smith", "age": "24" }, "628e1fd0d27981c6250d886c": { "name": "Fred", "surname": "Bloggs", "age": "32" }, "628e20c805f38641bdc08d7d": { "name": "Joe", "surname": "Harris", "age": "27" } } const parent = document.getElementById('table'); Object.keys(jsonfile).forEach(element => { const { name, surname, age } = jsonfile[element] let child = `<tr> <th>${name}</th> <th>${surname}</th> <th>${age}</th> </tr>` parent.insertAdjacentHTML('beforeend', child); });
<table id="table"> <tr> <th>Name</th> <th>Surname</th> <th>Age</th> </tr> </table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.