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. I would like to write the values from the file into an HTML table with Javascript (not php!).
Here is an example:
Json File:
{
"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? 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...
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.
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>