Как обращение файла JSON в таблицу с динамическими колоннами в HTML
То, что он перемещает, состоит в том, что я хочу прочитать файл JSON, и в том, что как только он это прочитал он верит в таблицу начиная с файла с Вашими соответствующими полями. Как например:
{
"nombre":"Ana",
"edad":20,
"Hobbie":"Cantar" }
И верят в таблицу: Назовите Возраст Оббье Анну 20 Cantar 
Я комментирую тебе следующее serГ - в первый идеал, который показывал бы продвижение на как ты это строишь.
Однако я показываю тебе пример, который я точно только что сделал, где я занимаю
1.-VueJS (Чтобы переворачивать или размещать самую простую дату способа внутри таблицы во мне HTML)
2.-Axios (для управления просьб AJAX) 3. - Для того, чтобы VueJS функционировал, нуждайся в том, чтобы быть внутри контекста этикетки HTML с одним пойдите, что я например поместил ему app 4. - С директивным органом v-for я получаю тот же результат поездки как будто он использовал цикл foreach, но более чистым способом на уровне cГіdigo 5. - Я объявляю пустую договоренность, названную данные, которая despuГ©s ее peticiГіn посредством Axios irГЎ наполняя формой dinГЎmica 6.-mГ©todo mounted используется, чтобы показывать, что cГіdigo инстанции Vue я функционировал как только вышеупомянутая инстанция была создана, и готовая
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Sex</th>
</tr>
<tr v-for="dato in datos">
<td>{{ dato.name }}</td>
<td>{{ dato.age }}</td>
<td>{{ dato.sex }}</td>
</tr>
</table>
</div>
<script src="https://unpkg.com/vue@2.5.13/dist/vue.js"></script>
<script src="https://unpkg.com/axios@0.17.1/dist/axios.min.js"></script>
<script>
new Vue({
el: '#app',
data:{
datos: []
},
methods: {
getDatos: function() {
axios.get('data.json'). then(response => {
this.datos = response.data
})
}
},
mounted: function (){
this.getDatos()
}
})
</script>
</body>
</html>
Я Участвую в рыцарском турнире aquГ - внизу оставляю тебе data.json, который изобретает меня для примера, помещаю оба в ту же папку
[
{
"name": "Alfredo",
"age": 28,
"sex": "masculino"
},
{
"name": "Jorge",
"age": 20,
"sex": "masculino"
}
]
Следующий - конечный и ясный аспект - внутри таблицы, но у него нет стилей
Протестируй это в твоей команде asГ - как я перемещаю это тебя и deberГ, - когда привет функциональный.
-
1Perdó n из-за того, что он не переслал продвижение, мне был сделан интересным способ, в котором ты используешь Vue, но то, что он не нашел, как делать состоит в том, чтобы имя колонн было тем же самым, что тот JSON, например, если я меняюсь: " nombre":" Ana" из-за " name": " Ana". будь должен менять имя колонны. – Aza Jero 10.03.2018, 10:58
-
2имя колонн в таблице HTML ты это распределяешь в волю для того, чтобы они были равны тем твоего JSON, нет проблемы – 10.03.2018, 10:59
-
3Дело в том, что то, что я не хочу, состоит в том, чтобы имена были установленными и могли меняться в момент изменения файла – Aza Jero 10.03.2018, 11:16
-
4Дай мне возможность и má s поздно я отвечаю тебе – 10.03.2018, 11:20
-
5Если, большое спасибо заранее – Aza Jero 10.03.2018, 11:22
Привет я soluciГіn пойди из-за этой стороны, вводит следующий cГіdigo в твой рукописный шрифт и способствуй названный тому, чтобы он соответствовал. Ты должен звонить в нее funciГіn перемещая его переменную, у которой есть дата в формате json.
function jsonToHtmlTable(data) {
data = JSON.parse(data);
var table = document.createElement("table");
var thead = table.createTHead();
var tbody = table.createTBody();
var col = [];
for (var i = 0; i < data.length; i++) {
for (var key in data[i]) {
if (col.indexOf(key) === -1) {
col.push(key);
}
}
}
var cabecera = thead.insertRow(-1);
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th");
th.innerHTML = col[i];
cabecera.appendChild(th);
}
for (var i = 0; i < data.length; i++) {
tr = tbody.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = data[i][col[j]];
}
}
return table;
};
AquГ - я оставляю одну тебе pequeГ±a funciГіn в чистом языке сценариев JavaScript, который, pasГЎndole array объектов и id таблицы, будет наполнять таблицу dinГЎmicamente. cГіdigo estГЎ прокомментированный (и podrГ, - чтобы уменьшать немного, потому что он повторяется), но aquГ - я оставляю одну descripciГіn cГіmo, функционируй:
- Использует
.keys(), чтобы получать ключи Г-ndice от первого элемента array объектов (понимают, что у всех объектов будут те же ключи). - поверил, что линия заголовка dinГЎmica с ключами Г-ndice (не важно cuГЎles они были, ты можешь пытаться с различными JSON и seguirГЎ функционируя).
- пересекает array объектов, наполняя ячейки данными об объекте.
AquГ - ты можешь видеть это функционируя:
// estos datos los podrías obtener via AJAX
var datos = [
{
"nombre": "Ana",
"edad": 20,
"Hobbie": "Cantar"
},
{
"nombre": "Alberto",
"edad": 23,
"Hobbie": "Programar Videojuegos"
}
];
// llama a la función que genera la tabla
crearTablaDesdeArrayObjetos(datos, "miTabla");
//---------------------------------------
function crearTablaDesdeArrayObjetos(misDatos, idTabla) {
var claves = [];
// generamos la cabecera basada en las claves del primer elemento
if (misDatos.length > 0) {
// con Object.keys(array) obtenemos las claves del objeto
claves = Object.keys(misDatos[0]);
// creamos una fila
let fila = document.createElement("tr");
// para cada clave
for (let x = 0; x < claves.length; x++) {
// creamos una celda y rellenamos los datos
let celda = document.createElement("th");
celda.textContent = claves[x];
fila.append(celda);
}
// añadimos la fila a la tabla
document.getElementById(idTabla).append(fila);
}
for (let x = 0; x < misDatos.length; x++) {
let fila = document.createElement("tr");
// para cada clave
for (let y = 0; y < claves.length; y++) {
// creamos una celda y rellenamos los datos
let celda = document.createElement("td");
celda.textContent = misDatos[x][claves[y]];
fila.append(celda);
}
// añadimos la fila a la tabla
document.getElementById(idTabla).append(fila);
}
}<table id="miTabla">
</table>